CSS - 100vh responsive image

Question

I am trying to build a simple full screen layout that resizes an image so that it is only as big as the screen

 body, html { margin:0; padding:0; } .wrapper { background:teal; height:100vh; } .frame img { max-width:100%; height:auto; } 

 <div class="wrapper"> <div class="frame"> <img src="https://dummyimage.com/1500x2000/000000/fff"> </div> </div> 

I am expceting the image to fit the screen, however using my example above it doesn't. Where am I going wrong?

Answer 1

try this:

 body, html { margin:0; padding:0; } .wrapper { height:100vh; } .frame img { height: 100%; /* max-width: 100% --- if you want it to be max. 100% width of the screen but this will stretch the image */ } 

 <div class="wrapper"> <div class="frame"> <img src="https://dummyimage.com/1500x2000/000000/fff"> </div> </div> 

if you want a smoth background image for the whole site you can use this:

 body, html { margin:0; padding:0; } .wrapper { height:100vh; background-image: url("https://dummyimage.com/1500x2000/000000/fff"); background-repeat: no-repeat; background-position: center; background-size: cover; } 

 <div class="wrapper"> </div> 

Answer 2

I just removed max-width to width at img css.

 body, html { margin:0; padding:0; } .wrapper { background:teal; height:100vh; } .frame img { width:100%; height:auto; } 

 <div class="wrapper"> <div class="frame"> <img src="https://dummyimage.com/1500x2000/000000/fff"> </div> </div> 

Answer 3

You missed to set the size of the frame! Use full height of the whole container with 100%.

 body, html { height: 100%; margin:0; padding:0; } .wrapper { background:teal; height:100%; } .frame{ height: 100%; width: 100%; } .frame img { height:100vh; width: 100%; } 

 <div class="wrapper"> <div class="frame"> <img src="https://dummyimage.com/1500x2000/000000/fff"> </div> </div> 

Answer 4

Fullscreen responsive image background

 html, body{ height: 100%; } body { background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #999; } div, body{ margin: 0; padding: 0; font-family: exo, sans-serif; } .wrapper { height: 100%; width: 100%; } .message { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height:45%; bottom: 0; display: block; position: absolute; background-color: rgba(0,0,0,0.6); color: #fff; padding: 0.5em; } 

 <div class="wrapper"> <div class="message"> <h1>Responsive background</h1> <p>Fluid Layout</p> </div> </div>