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

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

这里的示例代码：

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

来源

2014-01-16 Daniel Harris

你需要JS为。如果你对纯CSS解决方案感兴趣，可以看看'background-size：cover;'[demo]（http://jsfiddle.net/9XG5w/4/） – alizahid

为什么不试试： 'background：url （'http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg'）repeat' – Aditya

你不需要JS。 – Popnoodles

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

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

来源

2014-06-05 15:53:27 Popnoodles

谢谢！这应该是被接受的答案。 – MattiSG

-1

这个有点扭曲了形象，但它可能是你在找什么：

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

来源

2014-01-16 22:18:54 Craighead

不起作用... http://jsfiddle.net/qjdLU/ –

这是我已经在过去用于支持回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; 
}

来源

2014-01-16 22:33:59 Aaron

我发现了一个解决方案，它是简单的，对我的伟大工程。为您需要的宽高比创建一个透明的PNG，例如15px x 4px。

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

像这样的东西（这个确切的样本未经）：

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

你可以，当然，与其他尺寸（高度），以及通过定义它，而不是宽度的做到这一点。

够简单。适用于我。

- 安德鲁

来源

2014-12-10 21:22:23

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

回答

相关问题