24

我正在将图像渲染为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;
}
4

9 回答 9

45

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

img {
    height: 300px
    width: 100%;
    object-fit: cover;
}
于 2019-10-14T15:55:05.107 回答
13

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

div { height: 300px; width: 300px; overflow: hidden; }
img { height: 300px; }
于 2013-04-23T19:39:40.247 回答
4

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

于 2013-04-23T19:36:17.813 回答
2

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

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

为了使它像使用 300px 一样更灵活,请使用:

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

高度自动调整

于 2020-06-19T05:34:44.563 回答
1

使用max-width代替min-width,并设置height300px(或仅使用max-height)。

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

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

div {
       height: 300px;
       width: 300px; 
       overflow: hidden;
    }
img {
       /*min-width: 300px;*/
       height: 300px;   
    }
于 2013-04-23T19:38:03.973 回答
0

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

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

于 2022-02-27T10:46:23.300 回答
0

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

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

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

div {
   height: 300px;
   width: 300px; 
   overflow: hidden;
}
img {
 width: 300px
}
于 2021-07-26T00:42:00.040 回答