如何按比例调整图像大小以适应 css 中 200px x 150px 缩略图的尺寸？答案

【问题标题】：How to proportionally size images to fit dimensions of 200px x 150px thumbnail in css?如何按比例调整图像大小以适应 css 中 200px x 150px 缩略图的尺寸？
【发布时间】：2011-06-30 18:15:39
【问题描述】：

即使使用 CSS 剪辑，我也尝试了几件事，但在 http://giantmango.com/arttest2-2510 的缩略图中没有得到成比例的适合。

在 CSS 中，最好的方法是什么？如何按比例调整图像的大小以显示为 200 像素（宽度）x 150（高度）的缩略图？

刚刚检查了萤火虫，出于某种原因，我所有的 img 标签总是设置为 200 的高度，即使我将 max-height 设置为 150...

【问题讨论】：

标签： image resize thumbnails

【解决方案1】：

使用max-height 和max-width。请注意，它们在旧版本的 IE 中已损坏。你可以这样做

#myImage: {
    max-height: 150px;
    max-width: 200px;
}

编辑：@tokiowp：试试这个。它应该可以工作（它肯定对我有用）。因此，您的布局问题来自您可能设置的其他属性。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
    </body>
</html>

编辑：事实证明，查看您的源代码，您实际上是在用类似的东西声明您的图像

<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78"  width="200" height="200"/>

当然，您需要删除width 和height 的这些声明。

【讨论】：

@Andrea。我这样做了，但它似乎仍然没有按比例调整大小。
@tokyowp：你在什么浏览器中测试？
我在正文中建议了一个最小的工作示例，其中图像按比例调整大小。可能您有其他规则或 JS 破坏了布局。
@Andrea 不幸的是，我不能像这样使用 img 标签，因为它会动态获取内容。我已经将 css 中的 img 设置为 max-height: 150px 和 max-width: 200px，但是还有一些我无法弄清楚的是将高度和宽度都设置为 200px。
@tokiowp：这只是一个节省空间的例子。在实践中，您将在外部样式表中编写 CSS 声明。如果您尝试这样做，并使用仅这两个规则创建一个页面，您的图像将被重新缩放。我不知道有哪些其他规则在干扰，但您可以尝试一次添加一条，直到找到破坏布局的内容。

【解决方案2】：

css:

#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}

html:

<div id="thumb"><img src="tb01.jpg"></div>

【讨论】：