css - 避免在图像 CSS 上拉伸(stretch)

Question

我正在将图像渲染到 div 中。我想避免拉伸(stretch)图像。

div {
  height: 300px;
  width: 300px; 
}
img {
  min-width: 300px;
  min-height: 300px;
  max-height: 300px;   
}

我的问题是图像的宽度会拉伸(stretch)。我希望它具有常规宽度，即使部分图像会丢失。

div {
  height: 300px;
  width: 300px; 
  overflow: hidden;
}
img {
  height: 300px
  max-width: none;
  min-width: 300px;
}

Answer 1

您只需添加 object-fit: cover; 即可实现此目的。一个例子可能是 -

img {
    height: 300px
    width: 100%;
    object-fit: cover;
}