html - 如何使图片填充整个容器并在 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;