我正在尝试向我的 html 添加一个带有框图像的 div。但我无法让图像拉伸到 div 的大小
这是我到目前为止所拥有的，
<div style="background:url('images/box.png') no-repeat center center fixed;width:600px;height:400px">
test
</div>
这将显示一个宽度为 600 像素、高度为 400 像素的 div，但它显示了图像的一半。但我需要让图像拉伸。
谢谢
问问题
52 次
2 回答
3
使用background-size: cover;或background-size: contain（根据您的需要选择合适的属性）
来自MDN
cover 这个关键字指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应该尽可能的缩小。
contains 这个关键字指定背景图片在保证两个尺寸都小于或等于背景定位区域对应尺寸的情况下，应该尽可能的放大。
于 2013-07-22T08:39:53.640 回答
2
如果您希望图像拉伸，失去其原始纵横比，请添加background-size: 100% 100%;.
另一方面，如果您希望图像占据整个 div，同时保持图像纵横比并且可以进行一些剪辑，请使用 background-size: cover
于 2013-07-22T08:41:15.760 回答