Как сделать изображения одинакового размера или одинакового размера?

Question

Я разрабатываю проект электронной коммерции в django, я создал модель для изображений и попытался изменить размер или сделать миниатюру изображений, но, похоже, это не работает для моего случая или, возможно, это проблема Front-end , Когда поставщик загружает продукты с изображениями, я хочу, чтобы продукты с изображениями помещались и выглядели в одной строке независимо от исходного размера изображения. Я не хочу, чтобы они отображались так, как на этой картинке

, поэтому я хочу, чтобы цена и кнопка находились в одной строке. Я попытался изменить размеры изображений, но не работает

Answer 1

Использование object-fit в CSS

img{
  width:350px;
  height:200px;
  border:1pt solid #f00;
}
.cover{
  object-fit: cover;
  object-position: center;
}
.contain{
  object-fit: contain;
}

<img src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"><br/>(force size)
<hr/>
<img class="cover" src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"><br/>bobject-fit: cover #auto crop
<hr/>
<img class="contain" src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"><br/>object-fit:contain

Answer 2

Я не фронтмен, но думаю, это должно помочь ... вот как можно получить размер изображения, получаемого из ImageField

<img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}"/>