具有最大宽度的 div 的跨浏览器固定纵横比答案

【问题标题】：Cross-browser fixed aspect ratio for a div with max-width具有最大宽度的 div 的跨浏览器固定纵横比
【发布时间】：2012-12-14 00:24:34
【问题描述】：

我的目标是在具有固定纵横比的 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/

我不确定，这是否需要两种不同的设置。

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

【问题讨论】：

在 Firefox 中，您会看到“文本”display: inline 图像，因此您会看到底部的小间隙。将display: block 添加到图像中，差距就消失了。见：jsfiddle.net/ywyQQ/3
摆脱height: 100%！如果你想保持纵横比，这是毫无意义的，因为它指示 Safari 将图像的高度设置为页面的高度。
不知何故我错过了，删除 height:100% 修复了 Safari 的行为（错误测试）。所以我在这里的最新小提琴实际上适用于 FF、IE、Safari、Chrome：jsfiddle.net/dfpGx 至少对于图像。现在我尝试让它与 jwplayer 一起工作。两个测试都在 jsFiddle 中。

标签： html css cross-browser responsive-design

【解决方案1】：

在 img 标签中添加：

vertical-align: top;

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

【讨论】：

这到底有什么变化？ Safari 似乎仍然是错误的。 Firefox 和 Chrome 可以使用 Jared Farrishs 提示修复 display:block。这是另一个 jsFiddle，我在其中包含了这两个问题并应用了迄今为止建议的内容jsfiddle.net/dfpGx
奇怪的是它在我的 Safari 5.1.7 中看起来不错

【解决方案2】：

对于图像，以下 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、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>

【讨论】：