css - Only first image stays in view when browser size decreases -


i have series of images laid across horizontally in div.

the goal browser gets smaller, images, visible , stay inline.

currently, first image stay visible, while other images go out of view. (although of images smaller.

here jsfiddle: http://jsfiddle.net/kxgum/

you notice 1 make browser smaller, images smaller first 1 stay in view, others have scroll right see.

i want of them still visible, meaning have shrink together.

css:

body{margin: 0 auto;} #week-wrap {border: 1px solid #000; height: auto; white-space: nowrap; max-width: 100%; width: auto; } img {max-width: 100%; height: auto; display: inline-block; width: auto;} 

since got 3 images width should 33% of parent container. change 100% in 33% , they're on screen , in 1 line.

img {max-width: 33%; height: auto; display: inline-block; width: auto;} 

see here: http://jsfiddle.net/kxgum/1/


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 -