Question

I am trying to create an album preview in HTML by showcasing thumbnails; All the thumbnails should be defined square in shape.

Now, when I am trying to show the thumbnails, either the resolution of some images is distorted, else in the other case(i.e.) if I don’t set both the properties(height and width), the images come out of the DIV and overlaps other images.

Can you please tell, how to achieve to show the image without loosing image resolution such that they don’t come out of the div; I don’t mind if the image is cropped.

A simple solution is good as I am using tables and I don’t want to use iFrames for this.
Thanks!!

Answer 1

use overflow: hidden on your div

HTML:

<div class="thumbnail">
     <img src="images/thumb-01.png"/>
</div>

CSS:

.thumbnail{
     overflow: hidden;
}