Question

我运行一个带有液体布局的网站。它有一个全宽标题，一个固定宽度的左边部分，一个可选的固定宽度右列和一个可变宽度内容区域。我正在寻找一种将图像缩放到内容div的整个宽度的方法。

内容的一般布局结构是：

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

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

我目前使用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;

}

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

1 个答案: