CODEWITHSUNDEEP
htmlimage
Roberto Becher
Roberto Becher

Reputation: 164

Force image to a specific size if it is larger without distorting the image?

I'm currently using an image and displaying it in 100px by 100px. Unfortunately, some of the images are distorted...

How can I display them in 100 x 100 even if there original size is 450 x 450?

Upvotes: 0

Views: 537

Answers (1)

Jamie Dixon
Jamie Dixon

Reputation: 54011

If you want to show the entire image, setting the size to 100 x 100 is going to distort the image as you know.

If you're not so bothered about displaying the entire image you can set the image as a background instead and display a portion of the image in your thumbnail.

To do this you can use something like the following:

HTML

<div class="thumbnail firstImage">
   <a href="[link to full size image]">Thumbnail of some image</a>
</div>

CSS

.thumbnail{
  width:100px;
  height:100px;
}
.thumbnail a{
  display:block;
  width:100%;
  height:100%;
  text-indent: -9999px;
}

.firstImage a{
  background: url([path to full size image]) 0 0 no-repeat;
}

Upvotes: 1

Related Questions