Menu
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.
850
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 !
178
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
