Question

我甚至尝试过使用CSS剪辑的一些事情，但是没有让它按比例适合这里的缩略图http://giantmango.com/arttest2-2510。

在CSS中，最佳方式是什么？如何按比例调整图像大小以在200px（宽度）x 150（高度）缩略图的尺寸中显示？

刚检查过firebug，由于某种原因，我的img标签总是设置为200的高度，即使我将max-height设置为150 ......

Answer 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的这些声明。

Answer 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>

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

2 个答案: