Question

我的目标是在具有固定宽高比的div中显示图像（或其他内容），其具有最大宽度，但如果需要将缩小。

以下jsFiddle显示，到目前为止我得到了什么。它确实适用于IE8。在Firefox和Chrome中，内部div不能完全填充外部div，底部有一个小间隙。 Safari显示错误的宽高比。

    <!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/

我不确定，如果这需要两种不同的设置。

这是一个完全有效的示例，但它基于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>

Answer 1

在img标签中添加：

vertical-align: top;

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

Answer 2

对于图像，以下jsFiddle是一个有效的解决方案（由@Jared Farrish和@biziclop建议）： http://jsfiddle.net/vEMEw/

图像的另一个解决方案是我在问题中已经提到过的解决方案： http://jsfiddle.net/gMUkE/2/

我到目前为止找到的唯一解决方案是（也）用于嵌入式jwplayer并且响应迅速，就是使用iframe。多少＆＃34;跨浏览器＆＃34;这个解决方案确实是，我不知道。我使用所有这些浏览器成功测试了它：FF 17.0.1，IE 8.0，Safari 5.0.3，Chrome 23.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>

具有最大宽度的div的跨浏览器固定宽高比

2 个答案: