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

Question

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

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

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

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

我没有设置宽度或高度。

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

score -2 · Accepted Answer

将图像 CSSmax-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。

4 回答 4