如何保持方形div内的原始图像比例

Question

我已经看到很多解决方案。解决方案要么更宽，要么更高。但我的问题是需要保持比例的图像，我不知道它可能更高或更宽。

Answer 1

只需给它width: 100%使其响应或调整为父母的大小：

.square {
  width: 400px;
  max-width: 100%; /* also make its parent responsive (advisable) */
}

.square > img {
  display: block; /* removes bottom margin/whitespace, alternative: "vertical-align: bottom" */
  width: 100%; /* responsiveness */
}

<div class="square">
  <img src="https://placehold.it/1600x900" alt="img">
</div>