Question

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

以下是示例代码：

HTML

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

的 CSS

.clearfix {
    width: 100%;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.5;
}

#bg_img {
    background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;
    position: absolute;
    z-index: 100;
    top: 9em;
    width: 100%;
    height: 406px;
    margin: 0 auto;
    display: inline;
}

工作JSFiddle

Answer 1

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

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

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

所以这就是如何实现它。 Demo

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

N.B。此解决方案不需要clearfix，OP在他的代码中有它。

CSS

#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%;
}

Answer 2

这是我过去用来支持IE8的。与此处支持过滤器的小型js插件结合使用：http://louisremi.github.io/jquery.backgroundSize.js/demo/

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;
}

Answer 3

我找到了一个简单易用的解决方案。为您想要的宽高比创建一个透明的PNG，例如： 15px x 4px。

将图像放在div中。将图像的宽度设置为100％。它会扩展到div的宽度，并以适当的纵横比垂直增长，将div的高度降低到适当的宽高比。

这样的事情（这个确切的样本未经测试）：

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

当然，您可以通过定义它而不是宽度来处理其他维度（高度）。

足够简单。适合我。

- 安德鲁

Answer 4

这有点扭曲了图像，但它可能正是您所寻找的：

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

CSS - 设置Div宽度100％并调整保持纵横比

4 个答案: