如何在CSS中按比例调整图像大小以适应200px x 150px缩略图的尺寸? [英] How to proportionally size images to fit dimensions of 200px x 150px thumbnail in css?
问题描述
即使使用CSS剪辑，我也尝试了几件事，但没有使其按比例显示在此处的缩略图中http://giantmango.com/arttest2-2510 .
I`ve tried a couple of things even using the CSS clip, but not getting it proportionally fit in the thumbnails here http://giantmango.com/arttest2-2510.
在CSS中，最好的方法是什么?如何按比例调整图像大小以显示200px(宽)x 150(高)缩略图的尺寸?
In CSS, what is the best way and how would I proportionally resize an image to display in dimensions of a 200px (width) x 150 (height) thumbnail?
只检查了萤火虫，由于某种原因，即使我将max-height设置为150，我的所有img标签也始终设置为200的高度.
Just checked firebug and for some reason all my img tags are always set to a height of 200 even though I have max-height set to 150...
推荐答案
使用 max-height和最大宽度.请注意，它们在IE的较早版本中已损坏.你可以做
Use max-height and max-width. Beware that they are broken in older versions of IE. You can do
#myImage: {
max-height: 150px;
max-width: 200px;
}
编辑:@tokiowp:尝试一下.它应该工作(它肯定对我有用).因此，布局问题出在您可能设置的其他属性上.
EDIT: @tokiowp: try this. It should work (it surely does for me). So the problem with your layout comes from additional properties you may have set.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
</body>
</html>
编辑:事实证明，查看您的来源，您实际上是在声明图像，例如
EDIT: it turns out, looking at your source, that you are actually declaring your images with something like
<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78" width="200" height="200"/>
当然，您需要删除这些 width 和 height 的声明.
Of course what you need is to remove these declarations of width and height.
这篇关于如何在CSS中按比例调整图像大小以适应200px x 150px缩略图的尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
