Jquery 在liquid网站布局中将图像调整为全宽

我运行一个具有流动布局的网站。它有一个全宽标题、一个固定宽度的左侧部分、一个可选的固定宽度的右侧列以及中间的可变宽度内容区域。我正在寻找一种方法，将图像缩放到内容分区的全宽

内容的总体布局结构为：

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中的事件大小调整问题？

不认为您需要JavaScript，但这里有一个可能的CSS解决方案，它使用背景大小：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;

---

}

使用

框大小：“边框框”

并停止绝对定位。请包括一个带有相关问题代码的JSFIDLE。谢谢。@AlienWebguy是的，看起来很有希望重新设计网站。但你确定它能解决核心问题，即将图像缩放到液体容器的最终宽度吗？在这种情况下，您能提示一下原因吗？@iambriansredd还没有问题代码。收缩浏览器时，液体div应收缩。但由于它包含固定大小的图像，浏览器将改为滚动。所以在resize你可以将图像缩小到最小，让div调整大小，然后将图像调整到div。不确定这是如何做到的，但我觉得这两种方法都不管用。这将为主体添加背景。“我的图像”是页面内容的一部分，作为块元素，将填充其父div的宽度。