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
Post a Comment