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

score 45 · Accepted Answer

您可以通过简单地添加object-fit: cover;. 一个例子可能是 -

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

score 13 · Accepted Answer

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

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

score 4 · Accepted Answer

如果您想避免拉伸最简单的方法（但保持原始宽度），请将图像作为 div 背景。

score 2 · Accepted Answer

2

只需指定 max-width 100% 和 height :auto

于 2018-11-20T06:35:54.387 回答

score 2 · Accepted Answer

为了使它像使用 300px 一样更灵活，请使用：

img { 宽度：100%; 适合对象：封面；}

高度自动调整

score 1 · Accepted Answer

1

使用max-width代替min-width，并设置height为300px（或仅使用max-height）。

于 2013-04-23T19:36:38.067 回答

score 1 · Accepted Answer

您可以使用overflow:hidden隐藏 div 宽度之外的图像的任何部分。

div {
       height: 300px;
       width: 300px; 
       overflow: hidden;
    }
img {
       /*min-width: 300px;*/
       height: 300px;   
    }

score 0 · Accepted Answer

在给图像一个固定的高度和宽度之后，我添加了 object-fit，如下所示：

img {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

score 0 · Accepted Answer

==>如果您要固定高度并且不想拉伸宽度

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

==>如果您要固定宽度并且不想拉伸高度

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

9 回答 9