How to make the images same fit or same size?

Question

I'm developing an e-commerce project in django, I have created a model for images and tried to resize or thumbnail the images but it seems this is not working for my case or maybe this is Front-end issue. When the vendor uploads the image products, I want the image products to fit and look in the same line regardless of the image original size. I don't want them to show like in this picture

so I want the price and button to be in the same line. I tried to resize the images but won't work

It's answered on this link: https://stackoverflow.com/questions/45379727/make-images-the-same-size-in-bootstrap-grid — psycho developer, Apr 30 '20 at 18:19
@psychodeveloper I tried that solution, but it doesn't work :( — angel, Apr 30 '20 at 18:36

score 0 · Answer 1 · answered Apr 30 '20 at 18:22

0

I'm not a front end man but i think this should help ... thats about how to get size for the image you get from ImageField

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

answered Apr 30 '20 at 18:22

Mohammed Abdelawel

103
8

score 0 · Answer 2 · answered Apr 30 '20 at 19:26

Use object-fit in 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

How to make the images same fit or same size?

2 Answers2