因此,主要思想是将该黑色图像保留在左上角(比例为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()块之外调用javascript,可以获得与您相似的输出。确保在文档加载后调用了javascript。

08-25 09:59
查看更多