Рендеринг изображений в стандартном размере без растяжения, с минимальным размером

Question

Мне нужно визуализировать изображения профиля в сетке размером точно 101x155.

Некоторые изображения слишком маленькие, некоторые слишком большие, большинство имеют неправильное соотношение сторон.показать img с минимальной шириной и высотой, без искажений, и показать точный размер, который я хочу?

Answer 1

Без реального изменения изображений у вас есть несколько доступных вариантов.

img { max-width: 101px max-height: 155px }

это позволит убедиться, что изображения не превышают ширину 101x155 пикселей. Поскольку они не имеют идеального соотношения сторон, по-прежнему будут пробелы по бокам изображения, если соотношение сторон не будет идеальным.

Другим способом было бы заключить их в контейнер

<div><img .../></div>
div {width: 101px; height: 155px; overflow: hidden}
img {width: 101px;} /*or do height: 155px)*/

Это не идеально, но дает другой результат. Это потребует, чтобы изображения были выше или шире для всех изображений.

Лучшим способом было бы изменить размер, но я знаю, что у нас не всегда может быть наш путь:)

Answer 2

Как насчет jQuery? Если вы просто включите <img> с class="grid-img":

$(".grid-img").each(function(i){
   var width = $(this).width();
   var height = $(this).height();
   var ar = height/width;
   if(width > 101) {
      var newWidth = 101;
      var newHeight = 101 * ar;
   } else {
      var newHeight = 155;
      var newWidth = ar / newHeight;
   }
   $(this).height(newHeight);
   $(this).width(newWidth);
});

что это должно сделать: если ширина изображения слишком велика, измените его размер в зависимости от ширины (сохраняя соотношение сторон). если нет, измените его размер в зависимости от высоты (снова поддерживая AR).