Question

所以主要的想法是将这个黑色图像保持在左上角（比例为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上的工作方式，当你尝试水平调整大小时它就会中断..虽然当你刷新窗口时它会回来应该是：/

Answer 1

通过调用onReady()块之外的javascript，我得到类似于你的输出。确保在文档加载后调用javascript。

Answer 2

好了，现在已经解决了，我按照这里的想法添加了一个新方法，负责让Chrome重绘页面： Force DOM redraw/refresh on Chrome/Mac

var forceRedraw = function（element）{...}

现在所有浏览器都很好。

CSS保持图像比例，不与Chrome一起使用

2 个答案: