2

The images are actually in 1000x1000 resolution. I want to display the images in 200x300 resolution without distorting the aspect ratio.

How can I achieve this?

Currently I used this method,

<img src="<?php echo base_url().$pl['product_image'];?>" 
                             style="width:200px;min-height:300px; max-height:300px;"/>
halfer
  • 19,824
  • 17
  • 99
  • 186
Saswat
  • 12,320
  • 16
  • 77
  • 156
  • 13
    So you want to change the aspect ratio without changing the aspect ratio? –  Jun 29 '15 at 16:49
  • 1
    you could resize to 200x200 and add 50px up and down of white space to make up for the missing 100px – loli Jun 29 '15 at 16:51
  • ummm.... photoshop.... and recreate one... that is 200*300 – aahhaa Jun 29 '15 at 16:51
  • 1
    you can do one of the following: 1) actually change aspect ratio 2) crop the image 3) add padding to the top/bottom – Christoph Jun 29 '15 at 16:52
  • From 1000x1000 to 200x300, actually you're changing the aspect ratio. You could resize to 200x200 and center the image in your container. – Jabel Márquez Jun 29 '15 at 16:53
  • it's really funny, most ppl don't understand aspect ration. more often enough my client want to change a vertical design to horizontal, they think it's just matter of dragging it on the screen. take 2 second... yeah right! – aahhaa Jun 29 '15 at 16:54
  • I think OP wants the same effect than `background-size: cover` except with an img element... – FelipeAls Jun 29 '15 at 17:27

1 Answers1

2

Put your images as background-images of a div rather than putting them as 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 your PHP code, this would 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/

connexo
  • 53,704
  • 14
  • 91
  • 128