css - 使用 CSS 在 div 中对齐图像

Question

我有以下问题。

我有一排 290px x 160px 的正方形，应该用 div 显示图像。

<div class="33percentWidth">
<img src="./img1" class="???" />
</div>

<div class="33percentWidth">
<img src="./img2" class="???" />
</div>

<div class="33percentWidth">
<img src="./img3" class="???" />
</div>

问题是如果图像更大(超过 290px x 190px；这会增大高度或宽度。

问题:我如何定义我的 img 类，以便图像居中(并缩放)以适合 290x190 正方形，并且对我来说确保“列”将持续存在？

Answer 1

你可以使用 CSS

.classname{
  max-width :290px;
  max-height:190px;
  align-content: center;
}