CSS -两行布局中的最大宽度图像应在受父元素约束时收缩

Question

我有一个图像(顶部行)和一个标题(底部行)，图像的最大宽度为400px。两行都在包装器中，最大高度为100vh。就像现在的代码一样，包装器的内容在受到视口约束时会溢出。理想情况下，图像应该缩小(保持其长宽比)，而标题仍然在底部可见。

HTML:

<div class="wrapper">
<picture>
<img src="https://images.theconversation.com/files/350865/original/file-20200803-24-50u91u.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop" />
</picture>
<div class="caption">This is a responsible cat</div>
</div>

CSS:

html, body { height: 100%; }
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #202227;
display: flex;
justify-content: center;
align-items: center;
color: #fafafa;
border: 2px solid pink;
text-align: center;
}
.wrapper {
padding: 10px;
max-height: 100vh;
background: #37393d;
border: 5px solid #36badd;
}
img {
width: 100%;
max-width: 400px;
}

JSFiddle demo: https://jsfiddle.net/audunolsen/w30e4sgq/17/

Answer 1

你的例子不能按你想要的方式工作，因为基于百分比的max-height总是使用父级的高度，而不是它是max-height(参见这个答案)。请直接将max-height: 100vh添加到镜像中。

更新小提琴:https://jsfiddle.net/qw70tr2f/1/