CSS-设置Div宽度100%并调整大小以保持纵横比

我有一个带有背景图像的div，它将覆盖标题幻灯片的一部分。我希望div的宽度始终为窗口大小的100%，即使用户重新调整其大小也是如此。高度应根据背景图像的纵横比进行更改。背景图像的尺寸为1500x406

以下是示例代码：

HTML

<div id="wrapper" class="clearfix">
    <div id="bg_img"></div>
</div>

---

工作

这在一定程度上扭曲了图像，但它可能是您正在寻找的：

#bg_img {
    background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
min-width:100%;
min-height:100%;
background-size:cover;
}

---

这就是我过去用来支持IE8的方法。与支持过滤器的小型js插件结合使用：

---

要使元素保持比例，只需使用此代码

<div id="some_div"></div>

#some_div:after{
    content: "";
    display: block;
    padding-top: 100%; /* the percentage of y over x  */
}

---

我找到了一个简单的解决方案，对我来说非常有效。为您想要的纵横比创建一个透明PNG，例如15px 4px

将图像放入div中。将图像的宽度设置为100%。它将扩展到div的宽度，并以适当的纵横比垂直增长，将div的高度向下推至适当的纵横比

类似于这样的情况（此精确样本未经测试）：

当然，您也可以通过定义其他尺寸（高度）而不是宽度来实现这一点

很简单。对我有用

--

---

Andrew

你需要JS。如果你对只使用CSS的解决方案感兴趣，可以查看

backgroundsize:cover为什么不试试：
背景：url（'http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg’）重复
你不需要JS。
img {
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='cover')";}
background-position:50% 0;
}

<div id="some_div"></div>

#some_div:after{
    content: "";
    display: block;
    padding-top: 100%; /* the percentage of y over x  */
}

<div id="wrapper">
    <div id="bg_img"></div>
</div>
<div class="clearfix"></div> 

#wrapper{
    position: relative;
    width: 100%;
}
#wrapper:after{
    content: "";
    display: block;
    padding-top: 27.06666%; /* 406 over 1500  */
}
#bg_img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://placekitten.com/1500/406);
    background-size: 100% 100%;
}

<div style="width: 100%">
 <img src="..." style="width: 100%" />
</div>