html - 如何拉伸(stretch)图像以填充图形标签

Question

我正在构建一个图像网格，并且我有一个图形标签列表，每个标签中都有一个图像。图像大小不同，所以如果我设置

max-width: 100%;
height: auto;

他们看起来不一样。

如何使所有图像都适合图形大小相同？我可以拉伸(stretch)不完全适合的图像。

谢谢

Answer 1

在具有contain 或cover 属性的img 标签上使用objectfit

figure img {
    object-fit: contain;//contain the image you can use cover to fill the div with image
    width: 200px;//desire width
    height: 200px;//desire height
}