柔性容器内响应图像高度

Question

我有一个标准的引导网格和其高度应等于文本块向右的高度的.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

使用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 2

我是假设别的东西。你可以做这样的事情与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 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>