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

【问题标题】：Why is my image ignoring the size (height) of its containing element?为什么我的图像忽略了其包含元素的大小（高度）？
【发布时间】：2014-09-13 04:28:45
【问题描述】：

我有一个ul 或imgs 来创建一个横向滚动画廊。

我希望将图像的高度限制为浏览器窗口，并调整其宽度以保持其比例。

即使我为每个包含元素指定了高度，带有height:90%; 的图像也比浏览器窗口大得多。在此处查看小提琴：JSFiddle

我在这里做错了什么？

附加信息：如果我在 .gallery-image 上设置 height: 90vh;，它看起来几乎完全符合我的要求，但感觉就像是 hack，我想了解为什么 % 不起作用。

我希望实现此功能：example。

【问题讨论】：

标签： html image css responsive-design

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这就是你要找的吗？ 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;
}

【讨论】：

【解决方案3】：

有两个问题：

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

(Heavily) Modified Fiddle

【讨论】：

【解决方案4】：

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

【讨论】：

“我希望将图像的高度限制在浏览器窗口中” - 我不相信您的解决方案会这样做。

【解决方案5】：

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

参见 jsfiddle.net/6xh6wbpL/2。

【讨论】：