Html 带内联块li的一排图库，所有布局取决于%高度

我有一排画廊，高度灵敏。图像位于列表中，其中li设置为显示：内联块，并缩放到ul容器的高度。 悬停时，将显示带有某些标题的覆盖图

这是可行的，除了一个非常恼人的细节： 调整浏览器缩放级别时，Strg+鼠标滚轮或更改浏览器窗口的高度会导致图像水平移动、重叠或增加图像之间的空间

IMG没有给出任何宽度。它们的高度为100%，所有周围容器的高度（直到body&html）为100%。除高度为60%并因此定义IMG高度的除外。我希望这也能定义图像的宽度，我希望它能定义周围容器的宽度。 ->这能做到吗？或者我需要使用JS设置实际宽度吗

当将li设置为“内联”时，可以防止这种行为，但是我无法使覆盖覆盖覆盖整个图像。它们仅覆盖图像底部的一个区域，具有一个线条高度

如果可能的话，我不想让李先生的票浮动

为了让事情更容易理解和玩弄，下面是代码的简化版本和JSFIDLE：

jsfiddle：

简化代码：

html:

---

JSFIDLE徽标的大小为136 x 23像素，li元素的宽度正好为136像素。因此，li似乎考虑了原始尺寸，但不考虑宽度的增加，当徽标缩放以适应高度时：100%

---

显然，解决方案是使用一个大小合适的图像，不需要缩放。

很有趣，谢谢你的回答！！不幸的是，这并不能解决我在小提琴所基于的网站上的问题。到目前为止，该网站只是本地的。它不包含任何iframe。我将尝试重现小提琴的错误。我的一个站点有另一个包装器，溢出：隐藏在所有东西周围。这打破了小提琴，令人惊讶的是图像显示错误，即使没有缩放。但是，删除此包装不会修复该站点。事实上，事情的显示似乎纯属偶然，因为调整浏览器窗口的大小也会破坏网站的布局。坏小提琴：

<div id="mainContent">
    <div id='hlGalleryWrapper'>
        <ul>
            <li>
                <img id='img1' alt='' src='http://jsfiddle.net/img/logo.png'/>
                <div class='img-overlay'>
                   someCaption
                </div>
            </li>
        </ul>
    </div>
</div>

html, body {
    height:100%;
    width:100%;
}

#mainContent {
    padding-left:150px;
    height:60%;
}

#hlGalleryWrapper {
    white-space: nowrap;
    height:100%;
}
#hlGalleryWrapper ul,
#hlGalleryWrapper ul li img {
    height:100%;
}

#hlGalleryWrapper ul li {
    position:relative;
    display: inline-block;
    list-style:none;
    height:100%;
}

#hlGalleryWrapper ul li .img-overlay {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
}