0

私の目標は、最大幅のアスペクト比が固定されたdivで画像（またはその他のコンテンツ）を表示することですが、必要に応じて縮小します。

次のjsFiddleは、私がこれまでに得たものを示しています。IE8では問題なく動作します。FirefoxとChromeでは、内側のdivが外側のdivを完全に埋めていないため、下部に小さなギャップがあります。Safariのアスペクト比が間違っています。

http://jsfiddle.net/ywyQQ/2/

    <!doctype html>
<html>
<head>
<title>Fixed Aspect Ratio</title>
<style>
.keepaspect
{
    position: relative;
    max-width: 750px;
    margin: auto;


    /* Box Shadow */
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    /* For IE 8 */
    /* For IE 5.5 - 7 */
    behavior: url(http://localhost/PIE.php);
}
.inner
{
    width: 100%;
    padding: auto;
    display: block;
}


</style>
</head>
<body>
      <div class="keepaspect inner">
           <img src=http://i42.tinypic.com/21e18cx.jpg width='100%' height='100%'>
      </div>

</body>
</html>

クロスブラウザに対応し、ある意味で常に外側のdivを埋めるように設定するにはどうすればよいですか？

この例でわかるように、まだ機能していないjwplayerも組み込まれているはずです。ただし、jwplayer埋め込みのマークアップは、テスト/デモンストレーションの目的で使用されます：http: //jsfiddle.net/Kn2Ju/1/

これに2つの異なる設定が必要かどうかはわかりません。

これは完全に機能する例ですが、これはimgタグに基づいているため、使用できません。コンテンツは必ずしもimgではありません。 http://jsfiddle.net/gMUkE/2/

    <!doctype html>
<html>
<head>
<title>Fixed Aspect Ratio</title>
<style>
#container
{
    position: relative;
    min-width: 300px;
    max-width: 750px;
    margin: auto;
}
#container img
{
    width: 100%;
    margin: auto;
    position: relative;
    display: block;

            /* Box Shadow */
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    /* For IE 8 */
    /* For IE 5.5 - 7 */
    behavior: url(http://localhost/PIE.htc);
}
.content
{
    width: 100%;
    height: 100%; /*optional in case the poster image has exact aspect ratio*/
    position: absolute;
    z-index: 1;
}
</style>
</head>
<body>
      <div id=container>
          <img src=http://i42.tinypic.com/21e18cx.jpg>
      </div>
</body>
</html>
4

2 に答える 2

0

画像の場合、次のjsFiddleが実用的なソリューションです（@Jared Farrishと@biziclopによって提案されています）：http： //jsfiddle.net/vEMEw/

画像の他の解決策は、私が質問ですでに述べたものです：http: //jsfiddle.net/gMUkE/2/

私がこれまでに見つけた唯一の解決策は、組み込みのjwplayerでも機能し、応答性が高いので、iframeを使用することです。このソリューションが実際にどれだけの「クロスブラウザ」であるかはわかりません。FF 17.0.1、IE 8.0、Safari 5.0.3、Chrome23.0.1271.97のすべてのブラウザーでテストに成功しました。

CrossBrowserJWPlayerResponsive.html

    <!doctype html>
<html>
<head>
<script src="/media/jwadvanced/player/6/jwplayer.js" type="text/javascript"></script>
<script src="/media/k2/assets/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/media/k2/assets/js/k2.noconflict.js" type="text/javascript"></script>
<title>Fixed Aspect Ratio</title>
<style>


#videowrap {
    width: 700px;
    max-width: 70%;
    background: #fff;
    padding: 30px;
    margin: 0 auto;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


</style>
</head>
<body>
<div id="videowrap">
    <div class="video-container">
        <div id="uniquePlayerID">
                <iframe src="iframetmpl.htm" width="800" height="450" frameborder="0" scrolling="no"></iframe>
          </div>
    </div>
</div>

</body>
</html>

iframetmpl.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>100% Height / Width</title>
     <script src="/media/jwadvanced/player/6/jwplayer.js" type="text/javascript"></script>
        <script>jwplayer.key="YOURJWPLAYERKEY"</script>
        <style type="text/css">
        html,body { height:100%; width:100%; padding:0; margin:0; }
        #player {
            height:100%;
            width:100%; padding:0; margin:-3px;
            }
        </style>
    </head>
    <body>
    <div id="player">
    </div>
        <script type="text/javascript">
                jwplayer('player').setup({
            'file': '/path/to/movie.mp4',
            'hd.file': '/path/to/hd/movie.mp4',
            'image': '/path/to/movieImage.jpg',
            'autostart': 'false',
            'width': '100%',
            'height': '100%',
            'wmode': 'opaque',
            'controlbar': 'bottom',
            'listbar': {
                'size': '180'
            },
            'logo': {
                'timeout': '1.5',
                'file': 'images/logo.png'
            }
        });
        </script>
    </body>
</html>
于 2013-01-03T01:55:56.960 に答える
0

これを img タグに追加します。

vertical-align: top;

http://jsfiddle.net/Riskbreaker/ywyQQ/5/

于 2012-12-28T23:37:32.237 に答える