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/

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

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

在 img 标签中添加：

vertical-align: top;

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

于 2012-12-28T23:37:32.237 回答
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、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>
于 2013-01-03T01:55:56.960 回答