Making Responsive Images with Different Aspect Ratios The Same Height

How to make an Height and Width Responsive Image with Kept Ratio in html and css?

You can use max-width and max-height together on the image then it will keep your aspect ratio and always fit on the screen with the complete image showing

body {
  margin: 0;
}

.test {
  background-color: #222;
  color: #eee;
  padding: 2rem;
  height: 90vh;
  width: 90%;
  box-sizing: border-box;
}

.test img {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

<div class="test">
  <img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80">
</div>

How to make different aspect ration images into same width and height without getting cropped?

You can't force an image to have a different aspect ratio from its natural one without either cropping or distorting it. You say you don't want to crop so that is not a possibility and you would be unlikely to want to distort it (stretch it in one direction or the other).

What you can do is make sure that the whole image is always visible is use contain instead of cover.

Obviously this means there will be space either at the top and bottom or at the sides of your cards in some cases but this is an inevitable consequence of the no-cropping requirement.

Responsive images different sizes

Here is an example of a responsive layout for the elements included in your question.

Please note - this is just an example of what you can do with CSS responsive features, properties and units.

I have included a @media query which reduces the number of columns from 4 to 2 at a breakpoint of 600px.

To demonstrate an array of what's possible I have also used responsive units:

• %
• vw

a responsive property:

• aspect-ratio

a responsive display:

• display: flex

and a responsive function:

• min()

---

Working Example:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(100%, 960px);
  margin: 0 auto;
}

.gallery-link {
  display: block;
  flex: 0 0 22%;
  margin-bottom: 3%;
  line-height: 1.5;
  font-size: min(16px, 3vw);
  text-align: center;
  outline: 1px solid rgb(255, 0, 0);
}

.gallery-figure {
  display: block;
  width: 100%;
  margin: 0;
}

.gallery-image {
  display: block;
  width: 100%;
  border: 1px solid rgb(0, 0, 255);
  border-radius: 50%;
  aspect-ratio: 235/352;
}

@media screen and (max-width: 600px) {
  .gallery-link {
    flex: 0 0 44%;
  }
}

<div class="gallery">

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

</div>

---

Related Topics