CODEWITHSUNDEEP
htmlcss
Batman
Batman

Reputation: 6363

Flexible thumbnail overflowing

I have a div that contrains 3 images. The images are flexible depending on the size of the div, however they are overflowing. It works in full screen nicely but not well outside fullScreen.

Here's what it looks like before fullScreen:enter image description here

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 to I make the children element fill but fit within the parent div (either in or out of fullscreen.

Upvotes: 0

Views: 82

Answers (2)

user1934286
user1934286

Reputation: 1762

OP says this works for him http://jsfiddle.net/xDx49/27/

If your goal is to always have three images and the images will always be the same height then you will have to increase the height of your #playlist div. You should be able to remove the height property altogether and it should then work.

If you want more then three images in the future or they might be taller you can experiment with the overflow property which can put a scroll bar on the #playlist div. You can then style the scroll bar decently for IE and webkit browsers with css or there are jquery plugins for full control on all browsers.

http://jsfiddle.net/xDx49/5/

demonstrates your issue. When an element is absolutely positioned and has a 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;
}

Upvotes: 0

Jan
Jan

Reputation: 719

Try to add this rule

.thumb img{
max-height:30%;
}

But it wont work for more than 3 images

Upvotes: 1

Related Questions