CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Miki7
Miki7

Reputation: 75

How to stretch image bootstrap

Im having problems stretching this image enter image description here I found solution to get in there, but it won't stretch to the full. How do i stretch it?

Upvotes: 2

Views: 8510

Answers (2)

bwitkowicz
bwitkowicz

Reputation: 754

Looks like you are wrapping an entire page in .container which makes your website have fixed with. You need to use .container-fluid in order to make it stretch to browser width. Note that you can mix those two:

<div class="container">
    <!-- your topbar with menu here -->
</div>
<div class="container-fluid my-image">
    <!-- your image here -->
    <img src="image.jpg" alt="" class="img-responsive" />
</div>
<div class="container">
    <!-- rest of your page here -->
</div>

Use img-responsive class on your image if you are using html img tag, or if you want to go with css background property you can add another class to your .container-fluid and then style it like so:

.my-image {
    background: url(image.jpg);
    background-size: cover; /* will stretch the image to your div size while maintaining aspect ratio */
}

For CSS solution you are gonna need to have height of your div defined in some way, it can be fixed of course which will not look good on small mobile devices or you can maintain an aspect ration of that div by doing padding-bottom: 60% where the percentge is calculated according to the aspect ratio (i.e. 100%/60% is 5/3 aspect ratio).

Upvotes: 1

Naveen Setty
Naveen Setty

Reputation: 625

simple use "container-fluid" class name instead of "container"

here is the sample code 

<div class="container-fluid">
    <img src="someimage.png" />
</div>

make sure there are no parents to this container with "container" class,

this should be direct child to the body.

Upvotes: 0

Related Questions