尝试压缩一个1658 * 1156的图像到宽度:800px的div;高度:100%;作为背景图像

Question

我试图使用1658 × 1156的图像作为背景图像，宽度为800px，高度为100%的div。我的目标是使用css压缩图像到宽度的大小，但图像仍然重叠的div的大小。这是我的尝试:

<div  style="margin: 0px; padding: 0px; width : 800px; height:100%" class="col-md-8 col-xs-8 col-lg-8">  
                    <div class="panel panel-body" style="background-repeat: no-repeat; background-attachment: fixed; background-position: center; overflow-scroll: none; width : 800px; height:100%;z-index: 1;  padding:2px; border: black solid thin;background: url(resources/img/bck.JPG) center top">

请问如何将图像压缩到div的大小

Answer 1

尝试background-size: cover

<div class="panel panel-body" style="background-image: url('http://www.soar-nj.com/media/k2/galleries/1176/fhpeqpl5.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; width : 800px; height:100%; z-index: 1;  padding:2px; border: black solid thin; background-size: cover; ">

不裁剪图像的解决方案(使用background-size: 100% 100%;)。

它会将图像扩展到100%的宽度和100%的高度，但这会拉伸图像，因为图像比容器大。因此，我建议您使用background-size: cover或使用分辨率较低的图像。

<div class="panel panel-body" style="background-image: url('http://www.soar-nj.com/media/k2/galleries/1176/fhpeqpl5.jpg'); background-repeat: no-repeat; width : 800px; height:100%; z-index: 1;  padding:2px; border: black solid thin; background-size: 100% 100%; ">

演示

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。

Answer 2

你可以简单地设置div的高度为557px，然后使用background-size:cover

或

您可以使用background-size: 100% 100%并将overflow:hidden应用于您的DIV。