html - Flexible thumbnail overflowing -

html - Flexible thumbnail overflowing -

i have div contrains 3 images. images flexible depending on size of div, overflowing. works in total screen nicely not outside fullscreen.

here's looks before fullscreen:

html:

<div id="controls"> <button id="playbutton">play</button> <div id="defaultbar"> <div id="progressbar"></div> </div> <button id="vol" onclick="level()">vol</button> <button id="mute">mute</button> <button id="full" onclick="togglefullscreen()">full</button> </div> <div id="playlist" class="animated fadeinright"> <div class="thumb"><img src="tbgow.jpg" /></div> <div class="thumb"><img src="tblast.jpg" /></div> <div class="thumb"><img src="tbtwo.jpg"/></div> </div>

css:

#playlist{ position:absolute; display:block; border:1px solid red; height: 90%; width: 30%; top: 0px; right: 0px; z-index: 2; float:right; padding: 2px; margin: 2px; color:white; opacity: 0; } .thumb img{ max-width: 85%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 2px solid white; opacity:0.1; }

basically how create children element fill fit within parent div (either in or out of fullscreen.

op says works him http://jsfiddle.net/xdx49/27/

if goal have 3 images , images same height have increment height of #playlist div. should able remove height property altogether , should work.

if want more 3 images in future or might taller can experiment overflow property can set scroll bar on #playlist div. can style scroll bar decently ie , webkit browsers css or there jquery plugins total command on browsers.

http://jsfiddle.net/xdx49/5/

demonstrates issue. when element absolutely positioned , has height property content overflow may occur.

<div id="playlist"> <div class="thumb"> <img src="http://placehold.it/100x100" /> </div> <div class="thumb"> <img src="http://placehold.it/100x100" /> </div> <div class="thumb"> <img src="http://placehold.it/100x100" /> </div> </div> #playlist { position:absolute; display:block; border:1px solid red; height: 90%; width: 30%; z-index: 2; padding: 2px; margin: 2px; color:white; } .thumb img { max-width: 85%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 2px solid white; }

html css html5 css3