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

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

max width

和

max height

是您所需要的

我的猜测是，如果它达到其中一个，它将调整自身大小

我在以前的web项目中使用过很多。 但我还没有将两者结合使用

---

编辑：我在评论中说过这一点，但设置这两个属性在我的测试中都起作用。它会保持比率，并根据首先达到的限制调整大小。不要设置任何

宽度
或
高度
属性，这些属性可能会导致问题css属性
最大宽度
和
最大高度
是您所需要的

我的猜测是，如果它达到其中一个，它将调整自身大小

我在以前的web项目中使用过很多。
但我还没有将两者结合使用

编辑：我在评论中说过这一点，但设置这两个属性在我的测试中都起作用。它会保持比率，并根据首先达到的限制调整大小。不要设置任何
宽度
或
高度
属性，这些属性可能会导致问题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代码会很简单。
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代码会很简单。
我实际上在搜索另一个查询的答案，但遇到了您的问题

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

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

希望这能帮助您或其他尝试类似问题的人。
我实际上是在搜索另一个问题的答案，但遇到了您的问题

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

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

希望这对您或其他尝试类似操作的人有所帮助。
您是否在服务器端使用类似PHP的工具来动态确定图像的宽度/高度，并根据图像特征设置一个类？是的，我使用PHP，使用codeigniter作为框架。您可以将其留给服务器端脚本？嗯，我认为您可以，特别是如果缓存作为一个选项。好的，我将研究这个问题的PHP可能性，并发布codesee为PHP编辑的问题解决方案。您是否在服务器端使用类似PHP的任何东西来动态确定图像宽度/高度，并根据图像特征设置一个类？是的，我使用PHP，使用codeigniter作为框架。您将把它留给服务器端脚本？好吧，我想你可以，特别是如果缓存是一个选项的话。好的，我会调查这个问题的PHP可能性，并发布代码见PHP解决方案的编辑问题，但是
max width
和
max height
不保留纵横比（即图像被拉伸）.不，最大宽度和最大高度不是这样工作的。它们不符合任何比例：（我试过几个用例，但在这个系统中找不到错误。这就是我试过的，并且在我所有的用例中都调整了大小。请告诉我我是否错了，但我觉得这很奇怪。PS我在firefox 4.0中测试过，但通常这不应该是一个问题。图像会调整到它首先达到的限制，并在我的测试中保持该比率。另外，不要设置任何高度或宽度属性，只需坚持“最大宽度”和“最大高度”属性……很抱歉，您是对的（除此之外，我的问题是由于设置了宽度），但是
max width
和
max height
不保留纵横比（即图像被拉伸）.不，最大宽度和最大高度不是这样工作的。它们不符合任何比例：（我试过几个用例，但在这个系统中找不到错误。这就是我试过的，并且在我所有的用例中都调整了大小。请告诉我我是否错了，但我觉得这很奇怪。PS我在firefox 4.0中测试过，但通常这不应该是一个问题。图像会调整到它首先达到的限制，并在我的测试中保持该比率。另外，不要设置任何高度或宽度属性，只需坚持“最大宽度”和“最大高度”属性…所有抱歉，您是