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.
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 !
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>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; } This should do the trick!
<img src="images/your-image.jpg" class="vh-100 vw-100" /> 