Question

我想将图像设置为div中的背景，以便可以为每个设备更改源以获得图像分辨率。问题是我不想设置div的高度，而只是它的宽度是100％，以便它可以适应设备窗口的宽度。因此，我希望根据div的宽度自动生成高度。

我已设置auto的高度，但除非我使用值设置高度，否则不显示div。

#imagetree {
   position:absolute; 
   z-index:12; 
   width:100%;
   height:auto;
   bottom:0;
   overflow: hidden;
   background: url(images/trees.png);
   background-repeat: no-repeat;
}

Answer 1

如果您事先知道图像宽度和高度之间的比例，则可以使用比例padding-bottom

作弊

例如，如果您的图片是300x180，则可以使用此css

#imagetree {
   position:absolute; 
   z-index:1; 
   bottom:0;
   overflow: hidden;
   background: url(http://dummyimage.com/300x180/000000/fff.jpg);
   background-repeat: no-repeat;

   width: 100%;            /* use 100% of width */
   padding-bottom: 60%;    /* 180px is 60% of 300px */
   background-size: cover; /* cover the div entirely with the background */
}

示例：http://codepen.io/anon/pen/ruBFt

Answer 2

当您提供position: absolute时，最初未设置height和width。您需要使用CSS手动设置它们。在您的情况下，由于您已将背景作为图像，绝对定位，为什么要将其设置为background-image？

您可以将图片放在<img />标签本身，然后使用与图片成比例的普通width和height进行渲染！通过在absolute定位容器内添加图片来更改代码。

<div id="imagetree">
    <img src="images/trees.png" />
</div>

在CSS中，你可能想要这样：

#imagetree img {max-width: 100%;}

css中绝对定位的自动高度

2 个答案: