使用 css 在 HTML 页面上调整 IMG 的大小答案

【问题标题】：resizing IMG on HTML page with css使用 css 在 HTML 页面上调整 IMG 的大小
【发布时间】：2015-03-04 11:14:26
【问题描述】：

我在 HTML 中显示一个 IMG。

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

我想将显示的图像大小限制为最大 200x200 PX。因此，如果图像更大，那么它将根据其尺寸比将其最大尺寸调整为 200。如果两个尺寸都小于 200，则保持原样。仅使用 CSS 而不使用 JavaScript 是否可以做到这一点？

【问题讨论】：

标签： html image css

【解决方案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/

结果如下：

【讨论】：

嗯，它在高度方面效果不佳。也许您的意思是max-height 而不是max: height:？
当然可以！点击新链接。

【解决方案2】：

是的，你可以，示例有一张大图和一张小图。

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

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

【讨论】：