html - 如何在不扭曲宽高比的情况下将 1000x1000 图像调整为 200x300 图像

Question

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

我怎样才能实现这个目标？

目前我用的是这个方法，

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

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