将图像调整到特定尺寸的盒子而不会失去纵横比？

Question

如何拍摄已输入Wordpress的图像并将其放入特定大小的div而不会失去它的宽高比？

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

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

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

我没有设置宽度或高度。

Answer 1

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

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

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

Answer 2

仅设置一个参数，即高度或宽度。您永远不会失去该图像的宽高比。您可以设置容器的宽度并使图像宽度为100％，也可以直接为图像添加宽度，但不要设置这两个参数以获得正确的宽高比。

Answer 3

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

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

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

Answer 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。