如何在不扭曲纵横比的情况下将 1000x1000 图像调整为 200x300 图像[重复]

Posted 2023-03-06

【中文标题】如何在不扭曲纵横比的情况下将 1000x1000 图像调整为 200x300 图像[重复]

【英文标题】：How to resize 1000x1000 image into 200x300 image without distorting the aspect ratio [duplicate]

【发布时间】：2015-09-16 05:48:43

【问题描述】：

图像实际上是 1000x1000 分辨率。我想以 200x300 的分辨率显示图像而不扭曲宽高比。

我怎样才能做到这一点？

目前我用的是这种方法，

<img src="<?php echo base_url().$pl['product_image'];?>" 
                             style="width:200px;min-height:300px; max-height:300px;"/>

【问题讨论】：

所以你想在不改变纵横比的情况下改变纵横比？

你可以调整到 200x200 并在上下添加 50px 的空白来弥补缺失的 100px

ummm.... photoshop.... 并重新创建一个... 即 200*300

您可以执行以下操作之一：1) 实际更改纵横比 2) 裁剪图像 3) 在顶部/底部添加填充

从 1000x1000 到 200x300，实际上是在改变纵横比。您可以将大小调整为 200x200 并将图像居中放置在容器中。

【参考方案1】：

将您的图像作为 div 的背景图像，而不是将它们作为img 标签。

<div style="background: url(http://waveilk.com/product_images/0cd666329a45121a3550611f9496e66fKMTWS00064-1.jpg) no-repeat 50% 50%; width: 200px; height: 300px; background-size: cover;"></div>

使用你的 PHP 代码，这将变成

<div style="background: url(<?php echo base_url().$pl['product_image'];?>) no-repeat 50% 50%; width: 200px; height: 300px; background-size: cover;"></div>

https://jsfiddle.net/1n5pdcwx/

【讨论】：

缺点：错误的语义