Question

我有一个单行的画廊，它的高度反应灵敏。图像位于列表中，其中li设置为显示：inline-block并缩放到ul容器的高度。在悬停时，会显示带有一些标题的叠加层。

~~这是有效的，除了一个非常令人讨厌的细节：~~ 调整浏览器缩放级别（Strg +鼠标滚轮）或更改浏览器窗口的高度会导致图像水平移动，重叠或增加它们之间的空间。

imgs没有给出任何宽度。它们的高度为100％，所有周围容器的高度均达到身体和周围。 HTML是100％。除了高度为60％并且因此限定了imgs高度的那个。我希望这也将定义图像的宽度，我希望这将定义周围容器的宽度。 - ＆GT;可以这样做吗？或者我需要使用JS设置实际宽度？

将li设置为内联时，可以防止此行为，但是我无法使叠加层覆盖整个图像。它们仅覆盖图像底部的区域，具有一个线高。

如果可能的话，我宁愿不漂浮李。

让事情更容易理解和玩具，这里是代码的简化版本和jsfiddle：

的jsfiddle：
http://jsfiddle.net/7Q83j/12/

简化代码：

HTML：

<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>

的CSS：

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%;
}

Answer 1

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

显然，解决方案是使用图像，图像尺寸合适，无需缩放。

带有内联块li的一行库，所有布局都取决于％高度

1 个答案: