CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
LulzCow
LulzCow

Reputation: 1229

Align responsive image to bottom of div using bootstrap

I'm trying to make it so that a responsive image doesn't ever show space at the bottom of the div that it's in on any screen resolution.

the link for my site is 107.170.157.210/wireless/ (note: I will delete this link after I fix the problem, but I will leave the rest of the question in case anyone else needs it)

The particular problem is with this section of html: 

<!-- This is inside the .intro class --> 
<div class="col-sm-7 col-md-7">
<div class="intro-img">
    <img src="img/Models_tall.png" class="img-responsive" alt="Responsive image" />
</div>
</div>

And the corresponding CSS is 

.intro {
    max-width:100%;
  max-height:590px;
  height:auto;
    position:relative;
  background-color:#67B0D1;
}


.intro-img{
 /*I had stuff here but got rid of it because I'm bad at css*/
}

The image might look okay on some resolutions, but for example, on my monitor if I make the browser window half of the screen size, there is a lot of blue space below the image, and I want it to be at the bottom of the blue div (intro).

Upvotes: 0

Views: 2407

Answers (1)

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

Just remove col-sm-7 col-md-7 from the .intro-img parent div which actually has the image. This is will not expose cut part show while you are resizing browser window or on smaller devices. But complete image will not be visible from right side on some resolution.

Another solution can be;

.col-sm-7.col-md-7 { /* change selector otherwise this will select all bootstrap .col-sm-7.col-md-7 */
position: absolute; 
bottom: 0px; 
right: 0px;
}

For this you have to resize image either via CSS or manually by some tool like adobe Photoshop.

Upvotes: 1

Related Questions