1

I have a form to upload different images and then this is displayed as cards on a website.

On image upload, the card size adjusts to the images and all cards remain uniform. (See Below)

enter image description here How can I get all the uploaded images (with different dimensions) fit the same space on upload. (See below)

enter image description here

Ouen A
  • 109
  • 1
  • 1
  • 8
  • 1
    Is [this](https://stackoverflow.com/questions/19414856/how-can-i-make-all-images-of-different-height-and-width-the-same-via-css) of any help for you? –  Jul 21 '22 at 08:10
  • 1
    you cant unless you distort them. best way is to put them in the background or inside a div with overflow hidden and center them, or as stated by Mike, use object-fit and fixed sizes – Rmaxx Jul 21 '22 at 08:12
  • Can you provide a working snippet of code? But I guess something like `img { aspect-ratio: 1/1; object-fit: cover; width: 100; }` the aspect ratio will keep it square then the object-fit property will crop the edges that don't fit into the square. If you want a different ratio then adjust it, popular sizes are `3/4` and `16/9` – Simp4Code Jul 21 '22 at 08:13
  • @Rmaxx that's not true at all, you can have this completely responsive based on the card width by using aspect-ratio – Simp4Code Jul 21 '22 at 08:23
  • I mean you cant just put them in and adjust to the size it will always either crop or distort. Ofcourse you can fit them in responsive, but it will not simply 'fit'.. ow i see now how 'fixed sizes' is unclear in my comment.. pardon me , i meant fixed ratio on the container – Rmaxx Jul 21 '22 at 17:08

1 Answers1

3

Use aspect-ratio on the image like in the snippet below

body { font: 16px sans-serif; margin: 0 }
.cards { display: flex; gap: 1rem; padding: 1rem }
.card { text-align: center; width: calc( (100% / 3) - .5rem ) }

.card img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
}
<div class="cards">
  <div class="card">
    <img src="https://picsum.photos/300/600">
    300 x 600
  </div>
  <div class="card">
    <img src="https://picsum.photos/600/300">
    600 x 300
  </div>
  <div class="card">
    <img src="https://picsum.photos/600/600">
    600 x 600
  </div>
</div>
Simp4Code
  • 1,394
  • 1
  • 2
  • 11