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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

只需指定最大宽度100％和高度：auto

Answer 5

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

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

Answer 6

要使其像使用300px一样更加灵活，请使用：

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

高度自动调整

Answer 7

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

Answer 8

==>如果你想要固定高度并且不希望宽度被拉伸

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

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

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

避免拉伸图像css

8 个答案: