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