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

图像的分辨率实际上是1000x1000。我想在不扭曲纵横比的情况下，以200x300分辨率显示图像

我怎样才能做到这一点

现在我用这个方法,

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

”
style=“宽度：200px；最小高度：300px；最大高度：300px；"/>

将图像作为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>

---

那么你想在不改变纵横比的情况下改变纵横比吗？你可以将大小调整为200x200，上下添加50px的空白，以弥补缺少的100pxummm…photoshop…并重新创建一个…即200*300。你可以执行以下操作之一：1）实际更改纵横比2）裁剪图像3）在顶部/底部添加填充从1000x1000到200x300，实际上您正在更改纵横比。您可以将图像大小调整为200x200，并将其居中放置在容器中。缺点：语义错误