Flexible thumbnail overflowing

Question

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.

Well In the image about there's a red boarder around the div tag. The images should all be inside that border. You can see it overflowing (indicated by yellow lines) — Batman, Feb 10 '13 at 09:49
What Id like it to do is when the parent div (red border) shrinks, the divs (the images are inside divs) should shrink to fill the space but not overflow. — Batman, Feb 10 '13 at 09:50
float property is made inert by position property. It is doing nothing in your code so you don't need it. — user1934286, Feb 10 '13 at 09:59

score 1 · Answer 1 · answered Feb 10 '13 at 10:01

1

Try to add this rule

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

But it wont work for more than 3 images

answered Feb 10 '13 at 10:01

Jan

689
1
6
22

I kinda fixed it by increasing the width, so it had more space to stretch. But I have all this space at the bottom. How would I even it out? http://jumpshare.com/v/1VQebr?b=U7FhKE – Batman Feb 10 '13 at 10:13

user1934286 · Accepted Answer · 2013-02-10T10:39:14.547

0

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;
}

edited Feb 10 '13 at 10:39

answered Feb 10 '13 at 10:14

user1934286

1,732
3
23
42

The images don't have to be the same height. I want them to adjust based on the playlist div size. The video container is in a flex box so on small screens the container will get small and so will the playlist. The images need to be able to adjust to that possibility. I can't remove he height of the playlist because the video controls are at the bottom of the container. They end up overlapping. I need the images to adjust vertical and horizontal so they always stays within the playlist div – Batman Feb 10 '13 at 10:18
max-height:25% (give or take) on the images. This was already said though and is dependent on there being three or less images. Is that the case? http://jsfiddle.net/xDx49/14/ – user1934286 Feb 10 '13 at 10:28
1

Im going to try that with max-width: 85%; because it's going out of horizontally. – Batman Feb 10 '13 at 10:31
was just about to suggest that. +1 – user1934286 Feb 10 '13 at 10:31
It works. Thanks! On a side note. How would you go about distributing each box equally within the div you have there? – Batman Feb 10 '13 at 10:32
Yea. There's a big space at the bottom. – Batman Feb 10 '13 at 10:39
? I still have trouble with vertical aligning. Post another question and see if someone else can help you from here. If they do then comment here with the link to that post. – user1934286 Feb 10 '13 at 11:07
@Batman There is a new and very effective HTML5 way to align vertically: [How to vertically center divs?](http://stackoverflow.com/a/2744005) – user1934286 Jun 27 '16 at 23:02

Flexible thumbnail overflowing

2 Answers2