html - How to resize 1000x1000 image into 200x300 image without distorting the aspect ratio -

this question has answer here:

• css force image resize , keep aspect ratio 17 answers

the images in 1000x1000 resolution. want display images in 200x300 resolution without distorting aspect ratio.

how can achieve this?

currently used method,

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

put images background-images of div rather putting them img tags.

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

using php code, become

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