How to make all images the same height without ruining proportions

Question

I have a list of articles and want all their images to be the same height so that the article titles line up vertically.

I tried setting a fixed height, such as 200px, to the images but this is causing them to look squished.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.article {
  margin-bottom: 24px;
  width: 100%;
}

.image {
  width: 100%;
  display: block;
  height: auto;
}

.article__category {
  margin: 12px 0;
  padding: 2px 4px;
  display: inline-block;
}

<article class="article">
  <div class="article__image">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/ceremony.jpg" class="radius-small image">
    </a>
  </div>

  <div class="article__category radius-small">
    <a href="#">
      <span>New Track</span>
    </a>
  </div>

  <h1 class="article__title">
    <a href="#">Ceremony: <em>“Turn Away The Bad Thing” Video</em>
    </a>
  </h1>
</article>

<article class="article">
  <div class="article__image">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/joyero_copy.jpg" class="radius-small image">
    </a>
  </div>

  <div class="article__category radius-small">
    <a href="#">
      <span>Music Video</span>
    </a>
  </div>

  <h1 class="article__title">
    <a href="#">Joyero: <em>“Dogs” Video</em>
    </a>
  </h1>
</article>

I want the images to all be the same height without ruining their proportions.

Possible duplicate of [Maintain image aspect ratio when changing height](https://stackoverflow.com/questions/30788131/maintain-image-aspect-ratio-when-changing-height) — rebecca, Jul 08 '19 at 15:43
your images don't look squished to me at all, could you provide your full code or a jsfilddle? — DanyAlejandro, Jul 08 '19 at 17:13

score 0 · Answer 1 · answered Jul 08 '19 at 16:02

Well, you can try this...

Works perfectly for me

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.article {
  margin-bottom: 24px;
  width: 100%;
}

.image {
  width: 100%;
  display: block;
  height: auto;
}

.article__category {
  margin: 12px 0;
  padding: 2px 4px;
  display: inline-block;
}


/*
classes of images had spaces Probably that's why it's not working.
I have added - in images' classes
*/

.radius-small-image {
  height: 200px;
}

<!Doctype HTML>
<html>

<head></head>

<body>
  <article class="article">
    <div class="article__image">
      <a href="#">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/ceremony.jpg" class="radius-small-image">
      </a>
    </div>

    <div class="article__category radius-small">
      <a href="#">
        <span>New Track</span>
      </a>
    </div>

    <h1 class="article__title">
      <a href="#">Ceremony: <em>“Turn Away The Bad Thing” Video</em>
    </a>
    </h1>
  </article>

  <article class="article">
    <div class="article__image">
      <a href="#">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/joyero_copy.jpg" class="radius-small-image">
      </a>
    </div>

    <div class="article__category radius-small">
      <a href="#">
        <span>Music Video</span>
      </a>
    </div>

    <h1 class="article__title">
      <a href="#">Joyero: <em>“Dogs” Video</em>
    </a>
    </h1>
  </article>
</body>

</html>

score 0 · Answer 2 · answered Jul 08 '19 at 17:32

You are trying to keep the image aspect ratio while resizing the image. To do so you just need to use this css property: object-fit which can have the following values:

fill : This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit
contain : The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
cover : The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
none : The replaced content is not resized
scale-down : The content is sized as if none or contain were specified (would result in a smaller concrete object size)

You can check these two links to pick the right choice object-fit - CSS: Cascading Style Sheets | MDN and CSS object-fit Property w3schools

How to make all images the same height without ruining proportions

2 Answers2