jquery - 强制 LI 在其包含的 IMG 旁边调整宽度

Question

我正在构建一个看起来像的水平滚动画廊

<ul class='scroll'>
<li class='img'>
<img/>
</li>
</ul>
<li class...

支持的 CSS 如下所示：

.img {
float: left;
display: inline;
height:90%;
width:auto;
}

.scroll {
    display:block;
    max-height:800px; 
    height:100%
}

.img img {
    margin:5px 10px;
    float:left;
    max-height:100%;
    height:auto;
    width:auto;
}

目前它工作得很好。加载图像时调整大小并最大为 800px 高度。然而，真正困扰我的是，当我将窗口调整为更小（或从更小到更大）时，li.img 不会随图像一起调整大小，这意味着你会留下巨大的白色边框或重叠的图像。

如果我用 chrome 中的 INSPECT ELEMENT 选择图像，它就会神奇地跳到位。

我想知道是否有一个 JQUERY 解决方案可以强制浏览器在调整大小时重新绘制 LI 标记（就像打开 Inspector 一样），或者以任何其他方式将 LI 锁定到包含的 IMG 宽度？

Answer 1

你可以使用

$(window).resize(function(){
  ...
});

并调用一个计算正确高度的函数。