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

时间:2011-06-04 17:24:43

标签: html image-processing

我想在网页中插入图片,我想让它适合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解决方案

3 个答案:

答案 0 :(得分:4)

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

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

我在之前的网络项目中使用了很多。 但我还没有使用两者的结合。

编辑:我在评论中提到了这一点,但设置这两个属性确实可以在我的测试中使用。它保持比率并调整其首先达到的限制。不要设置任何widthheight属性,这些可能会导致问题

答案 1 :(得分:1)

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代码很简单。

答案 2 :(得分:1)

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

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

设置容器

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

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