我的目标是在具有固定纵横比的 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>
最佳答案
关于html - 具有最大宽度的 div 的跨浏览器固定纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14074562/