我如何在Bootstrap中使图片填充整个容器并保持适当的宽高比？

Question

这可能是一个简单的问题，但是，尽管如此，我已经花了很长时间了。 这是HTML

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

这是div的常规CSS：

.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;

}