对图像使用引导网格系统-图像高度不会调整

Question

我正在尝试使用引导程序和图像制作两列网格。看来我设法将空间分成两列，但这是我的图像发生的情况：

适当调整宽度，使其适合一列，但图像的高度保持不变。我怎样才能解决这个问题？这是我使用的代码：

<div class="container">
  <hr style="padding:0px; margin-top:40px;margin-bottom:40px; border:1px solid; border-color:rgb(199,199,50) ;">

  <div class="row">
    <img class="col-md-6 col-sm-12 col-xs-12 col-lg-6" src="images\mainOther\firstText.jpg" alt="Flowers in Chania">
  </div>
</div>

Answer 1

您不应该将col类应用于图像，将其包装在div中，然后将col类应用于该图像；还将img-fluid类添加到img tom中，使其按照Bootstrap指南进行响应

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <hr style="padding:0px; margin-top:40px;margin-bottom:40px; border:1px solid; border-color:rgb(199,199,50) ;">

  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12 col-lg-6">
      <img class="img-fluid" src="https://via.placeholder.com/1500" alt="Flowers in Chania">
    </div>
  </div>
</div>