使用css在HTML页面上调整IMAGE的大小

Question

我在HTML中显示IMG。

SRC属性是动态的，每次都可以指向不同的图像。

我想将显示的图像大小限制为200x200 PX最大值。 因此，如果图像更大，那么它将根据其尺寸比将其最大尺寸调整为200。 如果两个尺寸都小于200，那么保持原样。 只有没有JavaScript才能用CSS做到这一点吗？

Answer 1

这可以通过以下方式完成：

HTML：

<div class="wrapper">
<img class="image" src="http://upload.wikimedia.org/wikipedia/commons/a/a5/Flower_poster_2.jpg" />
</div>    

CSS：

.wrapper {
    border: 1px solid red;
    width: 200px;
    height: 200px;
}

.image {
    display: inline-block;
    max-width: 100%;    
    max-height: 100%;
}

这是显示效果的JSFiddle：http://jsfiddle.net/confile/g4c6pyy6/

结果如下：

Answer 2

是的，你可以， 例子有一个大图像和一个小图像。

https://jsfiddle.net/richiwarmen/8exrt4sp/2/

.placeholder_img {
    max-width:200px;
    max-height:200px;
}
img {
    max-width: 100%;
    height: auto;
}