需要图像以匹配灵活父包装器的大小

Question

我正在尝试创建一个位于页面中心的图片库，并且最大高度/宽度为浏览器窗口的 85%。以下是目标：

• 绝对没有 Javascript（不，我们不想要第 3 方解决方案）
• 图像应始终与包装器大小完全相同（填充/边框/边距除外）
• 图片不得超过包装纸上设置的 85% 最大宽度/高度

问题是当我有一个非常高（或宽）的图像时，img 将忽略父母的 max-height 并在其包装之外运行。

• 溢出似乎不起作用（我们不需要滚动条）。
• 将 img 高度/宽度设置为 100% 似乎不起作用，我假设这是因为它的父级是绝对定位的？
• 无法设置包装 div 的高度/宽度（仅最大值），因为如果图像较小，则会出现一堆空白。同样，我们希望在没有 JavaScript 的情况下做到这一点。

对内联样式表示抱歉。

<div id='wrap' style='position: absolute; top: XXXpx; left: XXXpx; max-width: 85%; max-height: 85%'>
    <img src='mypic.jpg'>
    <div id='leftArrow' style='position: absolute...'></div>
    <div id='rightArrow' style='position: absolute...'></div>
    <div id='thumbnails' style='position: absolute...'></div>
</div>

Answer 1

这样做：

Fiddled up for ya

所以我们基本上不需要在包装上设置高度。如果元素上没有定义高度，则百分比基于 DOM 层次结构中具有定义宽度的最低元素，该元素是接收百分比的元素的父级。

因此，在这种情况下，max-width: 85% 和 max-height: 85% 将 body 元素作为其最近的具有已定义大小的父元素。

HTML

<div id='wrap'>
    <img src='https://placehold.it/1200x1400' />
    <div id='leftArrow' style='position: absolute'></div>
    <div id='rightArrow' style='position: absolute'></div>
    <div id='thumbnails' style='position: absolute'></div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
}

#wrap {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}
#wrap img {
    max-height: 85%;
    max-width: 85%;
}

这个解决方案的部分美妙之处在于，我们基本上是在告诉 wrapper 元素将自己推到页面的中心，然后使用 CSS 3 transform 属性将自己动态地滑动到页面的中心通过相对于它自己的 height/width 偏移它（这就是 translate(-50%, -50%) 属性正在做的事情）。

这意味着无论图像大小如何，它都会始终如一地呈现在页面的中心。如果您填写了leftArrow、rightArrow 和thumbnails 部分，#wrap 元素仍将呈现在页面的正中心。 transform 是 CSS 3 规范中引入的最有用的功能之一，原因有很多。

编辑：

Updated fiddle

因此这里的不同之处在于，由于我们需要对.wrap 元素进行如此紧密的包装，因此我们将使用一些鲜为人知的度量单位来设置图片高度。

检查这个改变的 CSS：

#wrap {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background-color: #075883;
    max-height: 85%;
    max-width: 85%;
}
#wrap img {
    max-height: 100%!important;
    max-width: 100%;
}

此处需要注意的重要事项

1. 我们将max-width 和max-height 规则移至包装器。这样可以确保它可以适当地扩展。
2. max-width 和max-height 规则的更改意味着我们需要以不同的方式约束图片。你会认为我们可以只使用max-width: 100% 或max-height: 100% 来这样做，但你不能。 max-height 在这种情况下不起作用，而且画面非常糟糕。但不用担心，因为我们有 viewport relative 大小，我们可以依靠。我们将max-width 设置为85vw（85/100 视图宽度），将max-height 设置为85vh（85/100 视图高度）。

应该可以的。