CSS：使用 div 和背景图像，图像不调整大小以适合 div 大小答案

【问题标题】：CSS: using div and background image, image not resizing to fit div sizeCSS：使用 div 和背景图像，图像不调整大小以适合 div 大小
【发布时间】：2015-05-06 09:50:55
【问题描述】：

我有一些社交媒体图标，大小为71px 一块。我想使用 CSS 将图像缩小到 50px。我正在使用div 来制作hover 效果并将其更改为不同的图像，该图像基本上是相同的图像，但染成蓝色。

我无法通过在图像上设置background-size: cover 来弄清楚为什么我的图像没有调整大小。如下图所示，它们正在被切断。

顺便说一句，我正在使用Bootstrap。

HTML

<div class="row">
    <div class="col-md-12 col-sm-12">

        <div id="social_fb" class="social_icon"></div>
        <div id="social_twitter" class="social_icon"></div>
        <div id="social_gplus" class="social_icon"></div>

    </div>
</div>

CSS

body { 
margin: 0; 
padding: 90px 0 0 0; 
font-family: 'Raleway', sans-serif;
}

#site_wrapper { 
    overflow-x: hidden; 
}

a { 
    text-decoration: none !important; 
}
a:hover { 
    color: #ed1c24; 
}

h1, h2, h3 { 
    margin: 0; 
    color: #888; 
}
h1 { 
    font-size: 30px; 
}
h2 { 
    font-size: 24px; 
}
h3 { 
    font-size: 20px; 
}

section > .container { 
    border-bottom: 1px solid #ececec; 
    padding-top: 80px; 
    padding-bottom: 80px; 
}

.valign_center { 
    display: inline-block; 
    vertical-align: middle; 
}

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important;
}

#social_media .container { 
    padding-top: 50px; 
    padding-bottom: 50px; 
}

#social_media h2 { 
    font-size: 28px; 
    color: #0095da; 
    margin-bottom: 30px; 
}

.social_icon { 
    display: block; 
    background-size:cover;
    width: 50px; 
    height: 50px; 
}

#social_fb { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_fb.png"); 

}
#social_fb:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb_hover.png"); 
}

#social_twitter { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_twitter.png"); 
}
#social_twitter:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter_hover.png"); 
}

#social_gplus { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_gplus.png"); 
}
#social_gplus:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus_hover.png"); 
}

【问题讨论】：

您是否尝试过使用 background-size: 100% 100% ;

标签： html css image twitter-bootstrap-3

【解决方案1】：

原因是因为您在样式中为#social_twitter、#social_fb 等设置了background。这优先于background-size: cover。

如果您将背景属性设置为background-image，它应该会开始工作。

CSS

#social_fb { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb.png"); 

}
#social_fb:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb_hover.png"); 
}

#social_twitter { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter.png"); 
}
#social_twitter:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter_hover.png"); 
}

#social_gplus { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus.png"); 
}
#social_gplus:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus_hover.png"); 
}

【讨论】：