How can I make all images of different height and width the same via CSS?

html

responsive-design

css

object-fit

byAnton Shumikhin·Aug 4, 2024

To uniformize image size without distortion, employ the object-fit property in CSS with a fixed width and height. Use this code:

.img-same-size {
  width: 150px;   /* Setting a fixed width */
  height: 200px;  /* And a fixed height too */
  object-fit: cover;  /* Making content look dapper */
}

In HTML:

<img src="image.jpg" class="img-same-size" />

Exchange image.jpg with your appropriate image. The object-fit: cover; lets images fill up their assigned area, keeping their cool without any deformation.

Applying uniform size concepts

Making your div containers uniform

For fabulous grid arrangements, it's helpful to use div containers:

.div-same-size {
  width: 150px;
  height: 200px;
  overflow: hidden; /* Images can't play hide and seek anymore */
}

.div-same-size img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="div-same-size">
  <img src="image.jpg" />
</div>

Using this approach not only prevents overflow but also keeps your layout looking sharp.

Applying the scale-down method for larger images

When your Brady Bunch sized pics need to go on a diet without getting cropped:

.img-scale-down {
  max-width: 100%;  /* Scale down if content is bloated */
  height: auto;     /* Maintain the original shape */
  object-fit: scale-down; /*Just making sure no stretching happens */
}

Images will stay in tip-top shape without causing any discomfort to their smaller companions.

Applying responsive sizing for images

If your target is a responsive site, use relative units:

.img-responsive {
  width: 20vw;   /* Responsive width */
  height: 30vw;  /* Height varies based on viewport width "vw" */
  object-fit: cover; /* No aspect ratio left behind */
}

Take care to select your relative units wisely to maintain the aspect ratio.

Extending your understanding of uniformity

Centring images within containers

For smaller images than the reserved space:

.img-center {
  position: relative;
  overflow: hidden; /* Preventing the image from taking a walk */
}

.img-center img {
  position: absolute;
  top: 50%; /* place it in the middle... */
  left: 50%; /* ... and don't let it run away */
  transform: translate(-50%, -50%); /* "Stay just where you are!" */
}

This procedure ensures the images are always at the centre, like a trophy in a display case.

Thinking about content relevance

'object-fit: cover' might clip vital parts of an image. To avoid cropping the heart of your image:

Consider how the image tells its story
Make sure significant details won't get sliced off
object-fit: contain could be your best bet if all of an image is important

Backups for object-fit

Not all browsers are hip, so some don't support object-fit. Maintain a backup strategy:

.img-legacy {
  width: 150px;   /* Width that fits all */
  height: auto;   /* Height, you're free to choose your own size */
}

Include feature queries to apply object-fit only to those who can handle it:

@supports (object-fit: cover) {
  .img-legacy {
    object-fit: cover; /* "If you've got it, flaunt it!" */
  }
}

Building a visually appealing image feast

Strive to:

Display consistent visual content
Ensure visibility of crucial details
Keep a harmonious and attractive layout

Use the supplied CSS tools to paint your perfect picture gallery.

explain-codes / Html / How can I make all images of different height and width the same via CSS?

Linked

Changing image sizes proportionally using CSS



Scale image to fit a bounding box



Setting an image's width and height without distorting it



How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?



How can I fill a div with an image while keeping it proportional?



Resize background image in div using CSS



Maintain image aspect ratio when changing height



Applying uniform size concepts Extending your understanding of uniformity