CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Kai021195
Kai021195

Reputation: 833

How to make sure the content inside "row" is always the same height?

I am trying to fix a bug in this website, so I reproduce the problem in the sandbox below

https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html

So right now the problem is when ever you change the img inside,if the size is different, the layout will extend to different height.

enter image description here

enter image description here

You can see as the image change the layout height will change as well, I tried "height" but this will ruin the responsive feature of it, is there any way to mantain the same height but still be able to be responsive?

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

  <title>Hello, world!</title>
</head>

<body>
  <section class="py-4 d-flex flex-column align-items-center bg-dark text-white min-height">
    <div class="container">
      <div class="row">
        <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
          <h1 class="display-3 pb-3">Hello</h1>
          <span class="text-info lead">One two three</span>
        </div>
        <div class="col-md-7 d-md-flex justify-content-center align-items-center flex-column">
          <img src="https://i.imgur.com/l4Zvchl.jpg" class="img-fluid lazyload" alt="Page Wallpaper" />
        </div>
      </div>
    </div>
  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 0

Views: 57

Answers (1)

Nick Vu
Nick Vu

Reputation: 15520

You can try to add this style="object-fit: cover; width: 100%; height: 300px;" to your img element (you can customize it with class), but your image will be cut off a bit due to fixed height as a trade-off.

Mobile size

Desktop size

https://codesandbox.io/s/restless-fire-bp6vcv?file=/index.html:1095-1141

Upvotes: 2

Related Questions