CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designbootstrap-4
user3498459
user3498459

Reputation:

How do I make a picture populate the entire container keeping proper aspect ratio in Bootstrap?

It might be a simple issue, but, nevertheless, I've been scratching my head over it for quite a time now. This is the HTML 

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

This is the customary CSS for the div: 

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

}

Upvotes: 0

Views: 17

Answers (1)

user3498459
user3498459

Reputation:

Figured it out.

Use flex for display of the div.

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

}

And then apply some customary styling to the img.

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

}

Upvotes: 1

Related Questions