Принудительно заставить изображение определенного размера, если оно больше, не искажая изображение?

Question

В настоящее время я использую изображение и отображаю его в 100px на 100px.К сожалению, некоторые изображения искажены ...

Как их можно отобразить в формате 100 x 100, даже если исходный размер составляет 450 x 450?

Answer 1

Если вы хотите показать все изображение целиком, установка размера 100 x 100 приведет к искажению изображения, как вы знаете.

Если вы не слишком беспокоитесь о отображении всего изображения, вы можете вместо этого установить изображение в качестве фона и отобразить часть изображения на миниатюре.

Для этого вы можете использовать что-то вроде следующего:

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;
}