html - Creating 3 perfectly equal pics that take up the height and width of the page -


i trying 3 pictures take 100% of page equally. have width fixed basic code:

<style> html, body { margin:0; padding:0; width:100%; height:100%; }  .container {     width:100%; }  .inner { width:101%; overflow:hidden; }  .column { width:33.33333333%; float:left; }  .column img { width:100%; height:auto; }  </style>  <div class="container">     <div class="inner">         <div class="column">             <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">         </div>         <div class="column">             <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">         </div>         <div class="column">             <img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">         </div>     </div> </div> 

here fiddle: http://fiddle.jshell.net/xbtjzof8/

what trying images take 100% of height width, zooming in fit. having problems part.

edit: this: http://i.imgur.com/7kd6kcu.jpg 3 images. or http://www.raysrestaurants.com/index without side nav sections of course.

if understand want, can forcing height of image @ 100% , leaving width , sure have overflow-hidden on column contains image, trick. here fiddle :

http://fiddle.jshell.net/lbeax6ju/2/

you looking ?

edit: , forgot say, thathungerstar said.


Comments