跨瀏覽器的最大寬度的固定長寬比

我的目標是在具有固定長寬比的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>

來源

2012-12-28 André

在Firefox中，你所看到的「文本」'顯示：inline'圖像，讓您得到小在底部的差距。將'display：block'添加到圖像中，間隙消失。見：http://jsfiddle.net/ywyQQ/3/ –

擺脫'身高：100％'！如果你想保持高寬比，這是沒有意義的，因爲它指示Safari將圖像的高度設置爲頁面的高度。 – biziclop

不知怎的，我錯過了，刪除'高度：100％'修復了Safari的行爲（錯誤的測試）。所以我最新的小提琴在FF，IE，Safari，Chrome中都可以正常使用：http://jsfiddle.net/dfpGx至少是一張圖片。現在我試着讓它與jwplayer一起工作。這兩個測試都在jsFiddle中。 –

在圖片標記添加此：

vertical-align: top;

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

來源

2012-12-28 23:37:32 Riskbreaker

這個改變到底是什麼？它仍然似乎是錯誤的Safari。 Firefox和Chrome可以通過Jared Farrishs提示進行顯示：block。這裏是另一個jsFiddle，我包括這兩個問題，並應用到目前爲止建議的東西http://jsfiddle.net/dfpGx/ –

這是奇怪的它看起來不錯，在我的Safari 5.1.7 – Riskbreaker

好吧，我的測試是用Safari 5.0.3。 –

對於圖像，下面的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-03 01:55:56

跨瀏覽器的最大寬度的固定長寬比

回答

相關問題