CODEWITHSUNDEEP
csstwitter-bootstrap
Zeeshan
Zeeshan

Reputation: 751

Bootstrap Image fit to screen

I tried to scale image to browser screen using bootstrap, just like this website.

By setting

img {
    max-width: 100%;
    max-height: 100%;
}

it does show full image, but shows scrolls as well. Scrolls are being countered through:

body {
     overflow-y: hidden;
     overflow-x: hidden;
}

Now, the problem is, I am unable to show complete image on screen. It does crop some portion of image (in case image is bigger than browser window).

Anyone to help me please? Thanks.

Upvotes: 9

Views: 47215

Answers (4)

Parth Marfatia
Parth Marfatia

Reputation: 1

This should do the trick!

<img src="images/your-image.jpg" class="vh-100 vw-100" />

Upvotes: 0

trungvose
trungvose

Reputation: 20034

Bootstraphas the built-in img-responsive class for this purpose. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

html,
body {
  height: 100%;
  margin: 0;
  padding: 1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <img class="img-responsive" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" />
</body>

Upvotes: 5

Mad Dog Tannen
Mad Dog Tannen

Reputation: 7242

I've been trying this morning a bit and I finally got it to work.

Below is the code: 

body {
    background: url('/yourimage.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#fff;
    background-color:#333;
    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
}

Upvotes: 1

Jiteen
Jiteen

Reputation: 427

You should restrict the Width and Height of the image to screen size.

I notice that instead of using min-width and min-height properties, you are using max-width and max-height

Check out the JS Fiddle

Try the following code :

body {
  background:url("images/your_image.jpg");      // Your Image URL
  min-height : 100%;
  min-width : 100%;
  background-size:100% 100%;
  background-repeat:no-repeat;
  overflow-y: hidden;
  overflow-x: hidden;
 }

You can find it here : JS Fiddle

Hope this helps !

Upvotes: 5

Related Questions