html - Pictures aligned horizontally adjust in size with window size -


i made quick example of images aligned horizontally:

all of images adjust height of "wrap" div. http://i.imgur.com/voa1pbg.png

yet, when make window smaller, images start come out of div , go below such: http://i.imgur.com/vkua4ju.png

i want make make window smaller, images smaller. fit horizontally in size of browser. here code used make existing page:

html:

<h1> thriller </h1>      <div id="week-wrap">     <div id="sunday" class="day"><img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg"></div>     <div id="monday" class="day"><img src="http://mountains.insidrinfo.com/mountains-asia/media/mountains-asia.jpg"></div>     <div id="tuesday" class="day"><img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-favim.com-460323.jpg"></div>     </div> 

css:

body{margin: 0 auto;} #week-wrap {border: 1px solid #000; height: 300px;} .day {float: left;} img {height: 100%;} 

instead of float: left use display: inline-block divs. then, add white-space: nowrap container.

http://jsfiddle.net/explosionpills/uytxw/


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -