css - 图像按高度缩放

Question

我正在尝试将图像放入 div 中，并且 div 的高度是动态的，所以我遇到了图像溢出 div 的问题。

这是一个游乐场：https ://jsfiddle.net/fibin/yzox154p/2/

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: red;
  height: 1000px;
  max-height: calc(100vh - 100px);
  padding: 50px;
}

img {
  max-width: 100%;
}

<div class="wrapper">
<div>
  some capture
</div>
 <h2>
  some header
 </h2>
 <p>
  some description
 </p>
 <img src="https://filedn.com/ltOdFv1aqz1YIFhf4gTY8D7/ingus-info/BLOGS/Photography-stocks3/stock-photography-slider.jpg"/>
 <span>1/3</span>
</div>

标签： css