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/

目標が常に3つの画像を持ち、画像が常に同じ高さになる場合は、＃playlistdivの高さを増やす必要があります。heightプロパティを完全に削除できるはずであり、それで機能するはずです。

将来3つ以上の画像が必要な場合、または画像の高さが高くなる可能性がある場合は、オーバーフロープロパティを試して、＃playlistdivにスクロールバーを配置できます。次に、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 に答える