Question

我有一个标准的Bootstrap网格和一个.col内的图像，该图像的高度应等于右侧文本块的高度：

.img-fluid-height {
  max-height: 100%;
  width: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

我希望图像是.col容器的高度，该高度等于右侧文本块的高度。但是，它不能像这样工作。任何帮助将不胜感激！

Answer 1

我在假设其他事情。您可以使用background-size做类似的事情。

.background-image {
  height: 100%;
  background-image: url("https://placehold.it/1920x1280");
  background-size: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <div class="background-image"></div>
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

Answer 2

使用position:absolute从流中删除图像，您的文本将定义高度，然后您可以在图像上使用height:100%：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4">
    
      <img class="mh-100 mw-100 position-absolute" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

Answer 3

添加了width:100%，希望对您有所帮助。谢谢

.img-fluid-height {
  max-height: 100%;
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid">
  <div class="row">
    <div class="col-4 overflow-hidden">
    
      <img class="img-fluid-height float-right" src="https://placehold.it/1920x1280" alt="...">
      
    </div>
    <div class="col-8">
      
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
      
    </div>
  </div>
</div>

Flex容器内的响应式图像高度

3 个答案: