适合大背景图像以适合小 div答案

【问题标题】：Fitting a large background image to fit in a small div适合大背景图像以适合小 div
【发布时间】：2015-11-13 12:18:00
【问题描述】：

所以我有一个宽度为 700 像素的图像，这是我在宽度为 200 像素的 div 中用作背景图像的图像。

我想将图像保持在该大小，以便它可以为较小的设备保持良好的分辨率。但是我遇到的问题是因为图像大于图像溢出（隐藏）的 div，但我希望图像根据 div 的大小调整大小和适合，而不是溢出。

我的 div 目前是：

.featurebox{
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;
width:200px
}

【问题讨论】：

这能回答你的问题吗？ Background images: how to fill whole div if image is small and vice versa

标签： html css

【解决方案1】：

你可以试试这个吗？

background-size:100%;

【讨论】：

【解决方案2】：

您可以设置背景尺寸：

.featurebox {
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top;
background-size: 200px 200px;
width: 200px;
height: 200px;
}

<div class="featurebox">
</div>

【讨论】：

【解决方案3】：

尝试添加这个：

background-size: 100% 100%;

如果你使用

background-size: 100%;

高度设置为自动，然后仍然可以重叠。

【讨论】：

我有背景尺寸：封面； .应用了这个，它对我有用。 +1

【解决方案4】：

定义宽度和高度，然后使用background-size: cover

【讨论】：