避免在CSS中拉伸图像

Question

31

我正将一个图片渲染到一个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

你设置了 min-width，这意味着最小宽度为 300px。你是不是想用 max-width？ - Cezary Wojcik

我的图像需要至少300像素宽度，以填充整个div。 - Zincktest

图像的尺寸是多少？ - snumpy

@user2231285，我的和Ekaterina的答案都会给你这个。 - snumpy

@user2231285 请上传一张截图。我们似乎都不确定你实际想要什么。 - snumpy

显示剩余6条评论

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kieu Nguyen · Answer 1

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

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

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

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