How can I make content's columns scale with image size?

user_15368671 0
Viewed 74

I'm currently facing trouble when making layout. In the below picture, i want to make the content columns on the right ( title,lorem...) scale to fit height of the image on the left. How can I do it?

I'm using Bootstrap v5.1.1

Current image:

enter image description here

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
  <div class="row">
      <div class="col-md-4">
        <div class="col-md-4 black h-100">
          <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" style="width:300px;">
        </div>
      </div>
      <div class="col-8">
        <h1>Title </h1>
        <h6>Content</h6>
        <p>Date:june 23 2021</p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
        <br>Read more
      </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

bootstrap-5 twitter-bootstrap css html
2 Answers
  1. Use Bootstrap's flex grid (which is the default) rather than setting column sizes.
  2. Use the col-auto class on your image column to make it collapse to the image's width.
  3. Don't set inline sizing on your grid or your content. Inline styles make development and maintenance more difficult. Use a class for your image if you like, with a semantic name so you can change the size value for a redesign without the name becoming wrong.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<style>
  .size-medium {
    width: 200px;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col col-auto">
      <div class="col-md-4 black h-100">
        <img class="size-medium" src="https://via.placeholder.com/300" alt="">
      </div>
    </div>

    <div class="col">
      <h1>Title </h1>
      <h6>Content</h6>
      <p>Date:june 23 2021</p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
      <br>Read more
    </div>
  </div>
</div>

user_12648040

you put the class col-md-4 to the wrong tag

 <div class="row">
         <img class="col-md-4 p-0" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="">
      <div class="col-8">
        <h1>Title </h1>
        <h6>Content</h6>
        <p>Date:june 23 2021</p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
        <br>Read more
      </div>
  </div>
user_42962570
Related