强制 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 标签（就像打开检查器一样）或任何其他将 LI 锁定到包含的 IMG 宽度的方法？

Answer 1

您可以使用

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

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