Question

我想，仅使用CSS，将图像拉伸到容器div的最大宽度，保持纵横比，而不使用背景图像。但是，如果图像的高度超过X，那么它应该受到限制。以下内容不会导致图像达到100％。如果我设置了它，那么如果高度超过200px则会变得拉伸。

.container {
   width: 200px;    
   position: relative;
}
img {
  position: relative;
  max-width: 100%;
  max-height: 200px;
}

<div class="container"><img src=""></div>

这里有一个小提琴：http://jsfiddle.net/cyberwombat/agfy1cfm/4/

Answer 1

尝试设置高度：

img {
  position: relative;
  max-width: 200px;
  max-height: 50px
}

其中max-width和max-height的值与容器的尺寸相匹配。

Answer 2

我建议改为使用此选项，更灵活：

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

这样，您可以使用任何想要的宽高比图像，确保这些图像将保持响应状态

具有最大高度的响应图像

2 个答案: