jquery - 在液体网站布局中将图像调整为全宽

Question

我经营一个采用流动布局的网站。它有一个全宽标题、一个固定宽度的左侧部分、一个可选的固定宽度右列和一个可变宽度的内容区域。我正在寻找一种方法来将图像缩放到内容 div 的整个宽度。

内容的一般布局结构是:

body{position:absolute;width:100%},div#content{position:absolute;left:300px;},div#article

我希望 div#article 中的图像缩放到 div#article 没有该图像时缩放的宽度。使用 img{width:100%;} 并不能解决问题。 div#arcticle 将扩展到图像的自然宽度并向视口(viewport)添加滚动条。

我目前解决的问题是在页面呈现后使用 jQuery 将图像缩放到容器宽度。但是，如果浏览器窗口调整大小，这将需要额外的代码。

是否有针对此问题的 CSS 解决方案？

如果没有，有没有人有解决 JavaScript 中调整大小事件问题的好主意？

Answer 1

不要认为您需要 JavaScript，但这里有一个可能的 CSS 解决方案，它使用 background-size: cover 来填充您的 div。

body {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(path to image) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;