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

Time:03-08

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

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 >
    <div >
      <div >
        <div >
          <h1 >Hello</h1>
          <span >One two three</span>
        </div>
        <div >
          <img src="https://i.imgur.com/l4Zvchl.jpg"  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>

CodePudding user response:

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

  • Related