避免在图像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;
}

Answer 1

如果要避免以最简单的方式拉伸（同时保持原始宽度），请将图像作为div背景。

Answer 2

我会忘记设置最小高度和最大高度。只需将高度设置为300像素，并在div标记上隐藏溢出。这样，无论图像大小如何，它都将始终保持比例，并且永远不会超出div标签的边界。

div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }

Answer 3

您可以通过简单地添加对象适配：覆盖来实现这一点。。一个例子可能像-

css prettyprint-override">img {
    height: 300px
    width: 100%;
    object-fit: cover;
}