避免在图像 css 上拉伸

Question

我正在将图像渲染成 div 。我想避免拉伸我的图像。

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

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

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

原文由 Zincktest 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Al Amin 发布，翻译遵循 CC BY-SA 4.0 许可协议