Адаптивная высота изображения внутри гибкого контейнера - PullRequest
Новая
       3

Адаптивная высота изображения внутри гибкого контейнера

0 голосов
/ 05 февраля 2019

У меня есть стандартная сетка 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, высота которого равна высоте текстового блока справа.Тем не менее, это не работает так.Любая помощь будет оценена!

Ответы [ 3 ]

0 голосов
/ 05 февраля 2019

Удалите изображение из потока, используя 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>
0 голосов
/ 05 февраля 2019

добавлено 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>
0 голосов
/ 05 февраля 2019

Я предполагал что-то еще.Вы можете сделать что-то подобное с 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>
...