Авто-размер фото

Как вариант можно использовать абсолютное позиционирование изображения относительно контейнера. То есть ширину задавать на весь размер контейнера через width: 100%, высота, как известно, установиться пропорционально. И после этого установить верхнюю позицию изображения как top: 50%. А дальше используем правило transform: translateY(-50%). Благодаря этому изображение впишется по высоте в контейнер. Естественно, у контейнера нужно указать свойство overflow: hidden, чтобы скрыть выходящие за его края части изображения.

.gallery picture { 
  display: inline-block; 
  margin: 5px; 
  position: relative; 
  overflow: hidden; 
  width: 200px; 
  height: 200px; 
} 
 
.gallery img { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 100%; 
}

<div class="gallery"> 
  <picture> 
    <img src="http://placehold.it/150x220" /> 
  </picture> 
  <picture> 
    <img src="http://placehold.it/220x250" /> 
  </picture> 
</div>

В примере видно, что размеры картинок подгружаются разные, но благодаря стилям они масштабируются и вписываются в контейнер по вертикали.

Можно пихать изображение в блок с помощью background-image, а ресайзить с помощью background-size: cover или contain

Например:

<div class="wrap">
  <div><img src="w.jpg"></div>
  <div><img src="w.jpg"></div>
  <div><img src="w.jpg"></div>
  <div><img src="w.jpg"></div>
</div>    
<style>
  .wrap>div {
    width: 10px;
    height: 10px;
  }
  .wrap img {
    width: 100%;
    height: 100%;
  }
</style>

Картинки будут помещены в блоки и будут резиново изменяться вместе с ними

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

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