2

画像は、Chrome でのみブラウザーの幅に基づいてスケーリングされますが、IE および Mozilla Firefox では機能しません。thumb img はすべてのブラウザーで機能しますが、.play img max-width のみが機能しません。これが私の HTML です。

<div class="contai">
        <div> <img src="1.png" style="max-width:100%" /></div>
       <div class="thumb">
         <img src="2.jpg" />
              <div class="play"> <img src="videoImagePlay.png" /></div>
       </div>
 </div>

CSS 

    .contai{
    width:100%;
}
.thumb{
    border: 1px solid rgb(226, 226, 226);
   position:relative; float:left; width:38%
}
.thumb img{
    max-width:100%
}
.play{
     position:absolute; top:30%; left:35%
}
.play img{
    max-width:50%
}
4

3 に答える 3

2

このフィドルを参照してください。それはあなたを助けるかもしれません。

于 2012-06-26T09:44:55.663 に答える
2

プレイクラス right : 0

このように 

.play{     
     position:absolute; top:30%; left:35%; right:0;
}

ライブデモhttp://jsfiddle.net/puS7u/

于 2012-06-26T09:39:23.587 に答える
0

これは将来誰かを助けるかもしれません:画像にテーブルである親がある場合(ノードツリーの高さは関係ありません)、最大幅が定義された特定のピクセルを持っていない限り、FFまたはIEでは最大幅は機能しませんテーブル上の幅。ただし、これは Chrome では正常に機能します。

ロジックは、FF と IE が、max-width: 100% を無視して、コンテンツに応じてテーブルを常に拡張する必要があると考えているようです。

どのブラウザーが「正しい」または最適な実装を持っているかは明らかではありません。

于 2012-11-14T22:52:37.200 に答える