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

【问题标题】：Resize an image with height/width constraints and constant ratio使用高度/宽度约束和恒定比例调整图像大小
【发布时间】：2012-08-07 03:40:24
【问题描述】：

我想在网页中插入一张图片，我希望它适合 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 解决方案

【问题讨论】：

您是否在服务器端使用PHP之类的东西来动态确定图像宽度/高度并根据图像特征设置类？
是的，我使用 PHP，以 codeigniter 作为框架。你会把它留给服务器端脚本吗？
嗯，我想你可以，特别是如果缓存是一个选项。
好的，我将调查 PHP 解决此问题的可能性并发布代码
查看 PHP 解决方案的编辑问题

标签： html image-processing

【解决方案1】：

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

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

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

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

【讨论】：

但max-width 和max-height 不保留纵横比（即图像被拉伸）。
不，max-width 和 max-height 不能这样工作。他们不遵守任何比例:(
我尝试了几个用例，在这个系统中找不到错误。是我尝试过的，它确实在我所有的情况下都调整了大小。如果我错了，请告诉我，但我觉得这很好奇。 PS我在firefox 4.0中测试过，但通常这不应该是一个问题。图像会调整到它首先达到的极限，并在我的测试中保持这个比例。
另外，不要设置任何高度或宽度属性，只要坚持 max-width 和 max-height 属性...
所有的道歉，你是对的（我的问题是由于，最重要的是，设置宽度）

【解决方案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 代码会很简单。

【讨论】：

为什么不呢？这是伪代码，因为我不想测试它，但它应该。
不，我的意思是：首先我认为您想除以比率（在第一个 if 语句中）；那么它不能保证图像适合：想象一个 140 宽 * 1200 高。 wdith>120 所以宽度设置为120，然后高度设置为1000，它不适合120 * 80：/
让我重做这个逻辑。它不考虑height > width。
@Blender，底部的宽度/高度有轻微缺陷。你不想要+ 'px'; 在那里。 jsfiddle.net/vYutX
ok simple : ratio is 120 width for 40 height : 理想的比例是 3。如果图像的比例 >3，则高度应设置为 40，否则宽度设置为 120，其余部分由 html 完成

【解决方案3】：

我实际上是在寻找另一个查询的答案，但遇到了你的。

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

您会丢失边缘周围的一小部分图像，但至少它们都被插入而没有任何拉伸或挤压。

希望对您或其他尝试类似事情的人有所帮助。

【讨论】：