如何使内容的列随图像大小缩放？答案

【问题标题】：How can I make content's columns scale with image size?如何使内容的列随图像大小缩放？
【发布时间】：2021-11-12 10:14:26
【问题描述】：

我目前在进行布局时遇到了麻烦。在下图中，我想让右侧的内容列（标题，lorem ...）缩放以适合左侧图像的高度。我该怎么做？

我正在使用 Bootstrap v5.1.1

当前图片：

<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>

【问题讨论】：

欢迎。我注意到您有几个未解决的问题。请拨打tour 了解本网站的运作方式。

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

你把类 col-md-4 放到了错误的标签上

 <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>

【讨论】：

列类不应出现在图像上。不过，这并不能解决问题。

【解决方案2】：

使用Bootstrap's flex grid（这是默认值）而不是设置列大小。
使用图片列上的col-auto 类使其折叠到图片的宽度。
不要在网格或内容上设置内联大小。内联样式使开发和维护更加困难。如果您愿意，可以为您的图像使用一个类，并带有语义名称，这样您就可以更改重新设计的大小值，而不会出现名称错误。

<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>

【讨论】：

不客气。你拿tour了吗？不鼓励“谢谢”cmets 赞成投票和接受。