在不丢失纵横比的情况下将图像放入特定大小的盒子中？

Posted 2023-03-05

【中文标题】在不丢失纵横比的情况下将图像放入特定大小的盒子中？

【英文标题】：Fit image into specifically sized box without losing aspect ratio?

【发布时间】：2013-02-24 02:24:27

【问题描述】：

如何获取已输入 Wordpress 的图像并将其放入特定大小的 div 中而不会丢失其纵横比？

div 是 104px x 104px，但用户可以在 Wordpress 中输入任意大小的图片。

我正在使用以下内容将 Wordpress 中的图像插入页面：

<img border="0" src="<?php the_sub_field('logo'); ?>"  />

我没有设置宽度或高度。

【问题讨论】：

您可能想看看这个answer。关键是background-position: 50% 50%;

即使他们上传的图片不是正方形，您是否希望 104px 的 div 完全填充？还是您只想找到高度或宽度的最大值，然后将两者中的较高者减小到 104？

【参考方案1】：

只设置一个参数，即高度或宽度。你永远不会失去该图像的纵横比。您可以设置容器的宽度并将图像宽度设置为 100%，也可以直接为图像添加宽度，但不要同时设置两个参数以获得正确的纵横比。

【参考方案2】：

使用http://phpthumb.sourceforge.net/

这里有很多恶魔如何使用它

http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php

【参考方案3】：

这与 WordPress、PHP 或任何其他服务器端程序或编程语言无关。

<img style="max-width: 100%;" border="0" src="<?php the_sub_field('logo'); ?>"  /> 

只要您设置max-width 并且没有其他宽度或高度，图像就不会大于包含元素并且不会丢失纵横比。

【讨论】：

完美解决方案。对我来说就像一个魅力。谢谢！

【参考方案4】：

将图像 CSS max-width 和 max-height 值设置为周围 div 的 width 和 height 值。

<div style="width: 104px; height: 104px;">
    <img style="max-width: 104px; max-height: 104px;" src="myimage.jpg">
</div>

我对 Wordpress 不熟悉，但只要你可以更改这些 CSS 值，就去做吧，它会适合 div。