CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Ankur Nigam
Ankur Nigam

Reputation: 83

Image going out of screen in Bootstrap markup

I am using Bootstrap. In the following markup, when the browser window width is reduced to minimum, image spills over and not totally 100% visible.

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
         <h1 style="display:inline;">Some heading here</h1>
         <img src="http://feedsinsight.com/Content/logo.png" style='height:38px;vertical-align:bottom;float:right;' />
     </div>
</div>

How can I fit it?

Upvotes: 0

Views: 1364

Answers (3)

nofoobar
nofoobar

Reputation: 3215

Use class="img-fluid" this works in Bootstrap 4. It sets max width to 100%. The height of image is set to auto.

Upvotes: 0

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

You should use bootstrap's img-responsive class with a max-height rather than a fixed height to make the image scale nicely on small screens.

Bootstrap also has a convenience class pull-right which you can use instead of apply the float style inline.

<div class="row">
    <div class="col-xs-12">
         <h1 style="display:inline;">Some heading here</h1>
         <img class="img-responsive pull-right" src="http://feedsinsight.com/Content/logo.png" style='max-height:38px; vertical-align:bottom;' />
     </div>
</div>

Here's a bootply example: http://www.bootply.com/x9KQXFqkGr

Upvotes: 1

Regardt Ogies Myburgh
Regardt Ogies Myburgh

Reputation: 160

You should use min-width and max-width or make "height:38px" to height 100%. Using % values is more responsive than specifying pixels.

Upvotes: 0

Related Questions