У меня есть DIV, который масштабируется до доступной высоты, используя CSS flexbox. В этом DIV есть изображение, которое я хотел бы масштабировать вместе с DIV в обоих измерениях. Это означает, что он должен быть масштабирован, сохраняя его соотношение сторон, а размеры, которые меньше, чем соответствующий размер DIV, должны быть центрированы.
Я могу сделать изображение по ширине DIV, но не по высоте. Поэтому портретные изображения выходят из границ DIV.
Ниже приведена jsFiddle, чтобы продемонстрировать проблему.
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.box {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}
.box img {
width: auto;
height: auto;
max-width: 90%;
max-height: 90%;
}
<div class="container">
<div class="box"></div>
<div class="box" style="background: pink;">
<img src="//dummyimage.com/300" />
</div>
<div class="box"></div>
</div>