I am doing responsive photo gallery, and I having the difficulty on upload responsive image.

The responsive photo gallery does not have fixed width and height. I don't want the images to be cropped, my customer want to display whole image like admin-panel. any solution for this?

Hello,
there are many solutions for this. I prefer to use images as backgrounds in responsive galleries, it's more flexible. So, if use "enforce_max ='1'" you can make smth like this:

Code: Select all

HTML
<ul>
 <li style="background: url('image-1.jpg')"></li>
 <li style="background: url('image-2.jpg')"></li>
 <li style="background: url('image-3.jpg')"></li>
 <li style="background: url('image-4.jpg')"></li>
</ul>

CSS
ul > li {width:25%;height:0;padding-bottom:50%;background-position:center;background-repeat:no-repeat;background-size: 100% auto;}

If use img instead of background the solution would be more complex, I suppose by making the image absolutely positioned like {top:0;left:0;right:0;bottom:0} and sized {width:100%;height:auto} but I haven't tested it and think it's not so reliable, so some JS will be neccessary.