Question

我有一个ul img来创建一个横向滚动的图库。

我喜欢这些图片＆＃39;要限制在浏览器窗口中的高度及其调整宽度以保持其比例。

即使我为每个包含元素指定了高度，但height:90%;的图像比浏览器窗口大。请参阅此处的小提琴： JSFiddle

我在这里做错了什么？

其他信息：如果我在height: 90vh;设置.gallery-image，它看起来就像我想要的那样，但感觉就像是黑客，我想了解为什么％isn＆＃39工作。

我希望实现此功能：example。

Answer 1

这是你正在寻找的吗？ http://jsfiddle.net/jny0u3rc/8/

.gallery {
   height: 100%;
   overflow-x: scroll;
   white-space: nowrap;
   width: 100%;
}

.gallery-list {
   list-style: none;
   margin-top: 15px;
   margin-bottom: 0px;
   height: 100%;
}

.gallery-listitem {
   padding-top:0px;
   padding-right: 10px;
   height: 100%;
   display:inline-block
 }
.gallery-image {
   height:90%;
   width:auto;
}

Answer 2

有两个问题：

您忘记在html和body元素上添加100％的高度
您正在使用display: table和display: table-cell。 100％高度技术不适用于桌面显示。将其更改为display: block和display: inline-block，您将获得预期的结果。

(Heavily) Modified Fiddle

Answer 3

这可能就是你要找的东西？

http://jsfiddle.net/jny0u3rc/11/

我简化了代码，如果您必须将图像作为列表项加载，这可能无效。

这指定容器高度为100％，图像高度为90％。默认情况下，图像是内联元素，因此我将它们设置为 white-space：nowrap和overflow：容器上的auto。

CSS：

.gallery { 
height: 100%; 
overflow: auto; 
white-space: 
nowrap; }

.gallery img{
margin: 20px 10px 0 0px;
height:90%
}

Answer 4

您可以通过为每个图像添加宽度来实现您想要的效果。当然，宽度不必是静态的。您可以添加100％的宽度，然后将高度设置为自动，以便图像缩放。

Answer 5

对于占用高度的跨度，它必须是内联块。
对于要用作偏移父项的元素（计算子项的百分比高度），必须设置position。这是非常基本的CSS。

参见jsfiddle.net/6xh6wbpL/2。

为什么我的图像忽略了其包含元素的大小（高度）？

5 个答案: