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

【问题标题】：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'); ?>" alt="<?php the_sub_field('text'); ?>" />

我没有设置宽度或高度。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

只要您设置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。

【讨论】：