html - 使用高度/宽度限制和恒定比率调整图像大小

Question

我想在网页中插入一张图片，我希望它适合 120*40 的空间。问题是，原始图像可以有任何尺寸(400*40、30*220 等)所以如果我将高度属性设置为 40，我可能会发现自己的图像宽度大于 120。如果我设置 120px 宽度也是如此。如果我将宽度都设置为 120，将高度都设置为 40，这很合适，但原始比例会丢失，我不希望这样。

你有什么建议？
在 javascript 中获取图像的原始属性，然后设置其中之一(宽度为 120 或高度为 40)，以便另一个适合 120*40 ？一页中有很多这样的图片，所以我觉得这种方法有点重......

PHP 解决方案:

    <?php
list($width, $height, $type, $attr) = getimagesize($image);
        if($width/$height>3)
            $height *= 120/$width;
        else 
            $height = 40;
?>
<img src="<?=$image?>" height=<?=$height?>>

请参阅下面的 javascript 解决方案和 CSS 解决方案

Answer 1

css 属性 max-width 和 max-height 是您所需要的。

我的猜测是，如果它达到其中之一，它会自行调整大小。

我在以前的网络项目中用过很多。但我还没有使用两者的组合。

编辑:我在评论中说了这一点，但设置这两个属性在我的测试中确实有效。它保持比例并根据它首先达到的限制调整大小。不要设置任何 width 或 height 属性，这些可能会导致问题