У меня есть изображение (верхний ряд) и подпись (нижний ряд). Изображение имеет максимальную ширину 400 пикселей. Обе строки находятся внутри обертки с максимальной высотой 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: https://jsfiddle.net/audunolsen/w30e4sgq/17/
