Fiddled up for ya

Question

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

绝对没有Javascript（我们不想要第三方解决方案）
图像应始终与包装器的大小完全相同（填充/边框/边距除外）
图片不应超出包装器上设置的最大宽度/高度的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%;
}

这个解决方案的部分优点是我们基本上告诉包装器元素将自己推到页面的中心，然后使用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%;
}

此处需要注意的重要事项

我们将max-width和max-height规则移至包装器。这可以确保它适当缩放。
对max-width和max-height规则的更改意味着我们需要以不同的方式约束图片。您认为我们可以使用max-width: 100%或max-height: 100%来执行此操作，但您无法做到。 max-height在这种情况下无法工作，而且这张照片可怕地突然出现。但不用担心，因为我们有视口相对大小调整我们可以依赖。我们将max-width设置为85vw（85/100视图宽度），将max-height设置为85vh（85/100视图高度）。

应该这样做。

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

1 个答案:

Fiddled up for ya

编辑：