所以主要想法是将这个黑色图像保留在左上角(比例为 16:9)，并用“番茄”div 填充剩余空间。我找到的解决方案在 FF 甚至 IE 上都可以正常工作，但在 Chrome 和 Opera (webkit) 下会失效。我不完全确定我需要更改什么..
这是一个链接到 jsfiddle (在那里效果不佳，所以我也在下面添加了整个代码)。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.body{ margin: 0px; }
.container {
position: fixed;
height: 100%;
width: 100%;}
.imgHor {width:100%; display:block;}
.moreSpaceHor {width: 100%;}
.lessSpaceHor {
background: tomato;
height: 100%;}
.imgVer { height: 100%; }
.moreSpaceVer {display: inline; float:top;}
.lessSpaceVer {
#top: 100%;
width: 100%;
float:top;
height:100%;
display: inline;
background: tomato;
position:absolute;
}
</style>
<script>
var timeout=-1;
function manageResizing(){
window.clearTimeout(timeout);
timeout=setTimeout(resizeView,128);
}
function resizeView(){
var img=document.getElementById("imgResizer");
var typeOrient = (9*window.innerWidth > 16*window.innerHeight);
var typeClass = img.className =="imgVer";
//if class and orientation are the same -> quit
if(typeOrient == typeClass) return;
var mSpace=document.getElementById("moreSpace");
var lSpace=document.getElementById("lessSpace");
img.className = typeClass ? "imgHor" : "imgVer";
lSpace.className = typeClass ? "lessSpaceHor" : "lessSpaceVer";
mSpace.className = typeClass ? "moreSpaceHor" : "moreSpaceVer";
}
</script>
</head>
<body class="body" onload="manageResizing();" onresize="manageResizing();">
<div class="container">
<div id="moreSpace" class="moreSpaceHor">
<div style="position:fixed; top:0px; color:white;">PIOTR</div>
<img class="imgHor" id="imgResizer" src="http://oi62.tinypic.com/j9vsj7.jpg"></img>
</div>
<div id="lessSpace" class="lessSpaceHor">KOZAK</div>
</div>
</body>
</html>
//编辑 一些更多的信息，它在 Chrome/Opera 上工作，当你尝试水平调整大小时它会中断.. 虽然当你刷新窗口时它会恢复原样:/
最佳答案
通过在 onReady() block 外调用 javascript，我得到了与您类似的输出。确保在加载文档后调用 javascript。
关于javascript - CSS 保持图像比例，不适用于 Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23016319/