0

我有一个包含 3 个图像的 div。根据 div 的大小，图像是灵活的，但是它们会溢出。它可以很好地在全屏模式下工作，但在全屏模式下效果不佳。

这是全屏之前的样子：在此处输入图像描述

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（全屏或全屏。

4

2 回答 2

1

尝试添加此规则

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

但它不适用于超过 3 张图像

于 2013-02-10T10:01:11.190 回答
0

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;
}
于 2013-02-10T10:14:54.487 回答