Как сделать так, чтобы изображение заполняло весь контейнер, сохраняя правильное соотношение сторон в Bootstrap?

Question

Это может быть простой проблемой, но, тем не менее, я довольно долго ломал голову над этим.Это HTML

<div class="menuforpics">
      <img class="img-responsive" src="assets/computer_programmer_profile_image.jpg" alt="jumbotron-img"/>
</div>

Это обычный CSS для div:

.menuforpics{
background-color: black;
height: 90vh;
margin-top: 2%;
display: block;

}

Answer 1

Разобрался.

Используйте flex для отображения div.

.menuforpics{
background-color: black;
height: 90vh;
margin-top: 2%;
display: flex;
flex-direction:row; 
justify-content:center;

}

А затем примените некоторые обычные стили к img.

#makeitresp{
height: 90vh;
width: auto;

}