Question

我有一个禁止3张图像的div。图像是灵活的，取决于div的大小，但它们是溢出的。它可以很好地在全屏工作，但在fullScreen之外不太好。

以下是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;
}

基本上如何让子元素填充但适合父div（在全屏内或外。

Answer 1

尝试添加此规则

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

但它不适用于3张以上的图像

Answer 2

OP说这对他有用 http://jsfiddle.net/xDx49/27/

如果您的目标是始终拥有三个图像并且图像的高度始终相同，那么您必须增加#playlist div的高度。您应该能够完全删除height属性，然后它应该可以工作。

如果您希望将来有三个以上的图像，或者它们可能更高，您可以尝试使用溢出属性，该属性可以在#playlist div上放置一个滚动条。然后，您可以使用css为IE和webkit浏览器设置滚动条样式，或者在所有浏览器上都有jquery插件可以完全控制。

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

演示了您的问题。当元素绝对定位并且具有高度属性时，内容可能会溢出。

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

灵活的缩略图溢出

2 个答案: