Question 42449 in Html Question posted in
Some basic documentation can be found here.

Image height as percentage of parent containers width (using equal height bootstrap 5.2 cards) – Html

I have an issue I hope someone can help with (preferably as CSS and not a JS solution).

In the following example I have 8 cards, they have the class "h-100" which ensures they are all the same height (within a given row) regardless of how much text they contain.

At the top of the card there is an image that’s 100% width of its parent container.
The issue is this image has a fixed height, when the screen width changes the ratio between the image height/width changes significantly resulted in too much cropping of the image.

What I’ve tried and failed to do is adjust with height of the image based on the width of ifs container, so it maintains the same ratio.

I would appreciate any help with this

.card-img-top {
  height: 12rem;
  object-fit: cover;
}
<div style="overflow-x: hidden;">

  <div class="row">
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2<br />Line 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2<br />Line 3<br />Line 4</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2<br />Line 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1<br />Line 2<br />Line 3<br />Line 4</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4 col-xl-3 mb-2">
      <div class="card h-100 shadow rounded" style="border: none;">
        <img src="https://place-hold.it/300x500/966" class="card-img-top" alt="Some Image">
        <div class="card-body d-flex flex-column align-items-start justify-content-between" style="background-color: whitesmoke;">
          <div>
            <div>
              <p>Line 1</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As I could not figure out how todo this was trying to put a fix for the most extreme case of image cropping (mobile view) so tried to use media querys.

    During this process I found the solution, simply remove the following css "height: 12rem;" and it will auto size in the required way


  2. 0

    If I understood your problem correctly, you could try this :

    <style>
  .card-img-top {
    aspect-ratio: 16/9;
    object-fit: cover;
  }
</style>

    You can change the ratio to whatever you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search