如何在不扭曲宽高比的情况下将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/