Question

我想在网页中插入图片，我想让它适合120 * 40的空间。问题是，原始图像可以有任何大小（400 * 40,30 * 220等）因此，如果我将height属性设置为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属性，这些可能会导致问题

Answer 2

JavaScript非常快，为什么不尝试呢？

我只是坚持找到宽高比并添加一些支票：

var width = image.width;
var height = image.height;
var ratio = width / height;

if (width > 120) {
  width = 120;
  height = 120 * ratio;
} else if (height > 80) {
  height = 80;
  width = 80 * ratio;
}

image.width = width + 'px';
image.height = height + 'px';

当你似乎使用PHP时，ImageMagick可以调整图像大小以适应预定义的框内。我只知道如何通过CLI来做，因为我不使用PHP，但我敢打赌PHP代码很简单。

Answer 3

我实际上是在寻找不同查询的答案，但遇到了你的问题。

我使用this来调整图像的大小，我发现在我的许多脚本中都非常方便，但我建议你将图像的大小调整为比容器的最长边大一点。然后使用css水平和垂直居中图像，并使用overflow:hidden;

设置容器

你会在边缘周围丢失一点点图像，但至少它们都是在没有拉伸或挤压的情况下插入的。

希望能帮助您或其他任何尝试类似事物的人。

使用高度/宽度约束和恒定比率调整图像大小

3 个答案: