CODEWITHSUNDEEP
javascriptcsssemantic-ui
Ivan
Ivan

Reputation: 1241

How to resize the images to have the same height in group while keeping aspect ratio?

Currently, take a look at list of products with images:

enter image description here

Notice these pics are different sizes like different width and different height, I don't want it look bad, I'm looking a solution how to resize them properly without bothering aspect ratio. Excepted result would be like that:

enter image description here

There is CSS snippet for each img

   .ui.medium.image
   {
        width: 300px;
        height: auto;
        font-size: 1rem;
   }

If I change height: auto to height: 200px, but it ruins aspect ratio:

enter image description here

How to fix them properly with same height while keeping aspect ratio?

Any suggestions are welcome.

Upvotes: 5

Views: 3668

Answers (2)

Jacob G
Jacob G

Reputation: 14172

You can just set the width to auto, this will make them all the same height, and preserve the aspect ratio. However, they will then be different widths:

   .ui.medium.image
   {
        width: auto;
        height: 200px;
        font-size: 1rem;
   }

The best way to do this would be to use a background-image instead.
e.g.:

.ui.medium.image {
  /*Image should be a div*/
  height: 200px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Then, you could just set the image with an inline style:

<div class="image" style="background-image:url('path/to/image.jpg');">

Upvotes: 7

Gadget Blaster
Gadget Blaster

Reputation: 761

You need to center and crop the images using CSS background images.

<style>
    .image {
        background-position: center;
        width: 200px;
        height: 200px;
        float: left;
    }
</style>

<div class="image" style="background-image: url('http://lorempixel.com/400/200/sports/');"></div>
<div class="image" style="background-image: url('http://lorempixel.com/300/500/abstract/');"></div>
<div class="image" style="background-image: url('http://lorempixel.com/200/400/nature/');"></div>

Upvotes: 2

Related Questions