如何拉伸图像以填充图形标签

Question

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

max-width: 100%;
height: auto;

它们看起来不一样。

如何使所有图像适合身材大小相同？我可以拉伸不太合适的图像。

谢谢

Answer 1

请遵循css中的样式。.但是我认为这不是拉伸图像的正确规则。.我们可以在css中使用背景图像而不是拉伸。

css

figure img {
  width: 100%;
  height: auto;
}

Answer 2

在objectfit标记上使用img或contain属性的cover

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
}