css：使背景图像适合div的高度和宽度答案

【问题标题】：css: Making background image fit height and width of divcss：使背景图像适合div的高度和宽度
【发布时间】：2016-01-27 19:56:02
【问题描述】：

在引导模板中，我正在像这样添加图像作为背景

background:url(../images/banner.png) no-repeat;
background-size: 100%;

这些 css 规则的问题是图像被剪裁，仅显示图像的中心部分，这是根据添加的 div 的高度，我希望图像显示为其全高，而不是仅显示小的中心部分。

查看屏幕截图以更好地理解

【问题讨论】：

如果图片高 400px 而div 只有 100px 高，如何完整显示图片？你还需要增加div 的高度。与content 不同，背景图片的大小不会影响div 的高度（也就是说，它不能使div 扩大以适应图片）。
我们不能使用 css 压缩图像高度吗？
但是挤压不会和显示图像的全高一样，所以应该修改问题。
请提供jsfiddle

标签： jquery html css image twitter-bootstrap

【解决方案1】：

background-size: 100% 100%;

会给你想要的结果。

但我不推荐。

【讨论】：

会的。因为你想挤压图像。这不是一个好习惯。您必须保持图像的纵横比。在这种情况下，您必须牺牲图像的某些部分。所以，background-size: cover; 是最好的方法

【解决方案2】：

试试这个

background-size: contain;

【讨论】：

高度适合，但宽度不是如何使其适合宽度

【解决方案3】：

试试你的代码。

background:url(../images/banner.png);
background-repeat:  no-repeat;
background-size: 100%;

并添加这个。

html{
height: 100%;
}

【讨论】：

【解决方案4】：

div {
    height: 100px;
    width: 100px;
    background: url(http://i.ytimg.com/vi/v1SabYdIlZI/maxresdefault.jpg) no-repeat;
    background-size: 100%;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

background : url (../images/banner.png) no-repeat; 
background-size:contain;

【讨论】：