Fatal编程技术网
  • javascript/
  • Javascript CSS保持图像比例，不使用Chrome

Javascript CSS保持图像比例，不使用Chrome

javascript html css

Javascript CSS保持图像比例，不使用Chrome,javascript,html,css,Javascript,Html,Css,因此，主要的想法是将这个黑色图像保留在左上角（比例为16:9），并用“番茄”div填充剩余的空间。我发现的解决方案在FF甚至IE上都很好，但在Chrome和Opera（webkit）下会出现中断。我不完全确定我需要改变什么 这里有一个链接（它在那里工作不好，所以我也在下面添加整个代码） .body{margin:0px；} .集装箱{ 位置：固定； 身高：100%； 宽度：100%；} .imgHor{宽度：100%；显示：块；} .moreSpaceHor{宽度：100%；} 莱斯斯帕索先生

因此，主要的想法是将这个黑色图像保留在左上角（比例为16:9），并用“番茄”div填充剩余的空间。我发现的解决方案在FF甚至IE上都很好，但在Chrome和Opera（webkit）下会出现中断。我不完全确定我需要改变什么

这里有一个链接（它在那里工作不好，所以我也在下面添加整个代码）


.body{margin:0px；}
.集装箱{
位置：固定；
身高：100%；
宽度：100%；}
.imgHor{宽度：100%；显示：块；}
.moreSpaceHor{宽度：100%；}
莱斯斯帕索先生{
背景：番茄；
高度：100%；}
.imgVer{高度：100%；}
.moreSpaceVer{display:inline；float:top；}
lessSpaceVer先生{
#最高：100%；
宽度：100%；
浮动：顶部；
身高：100%；
显示：内联；
背景：番茄；
位置：绝对位置；
}
var超时=-1；
函数manageResizing（）{
clearTimeout（超时）；
超时=设置超时（resizeView，128）；
}
函数resizeView（）{
var img=document.getElementById（“imgResizer”）；
var typeOrient=（9*window.innerWidth>16*window.innerHeight）；
var typeClass=img.className==“imgVer”；
//如果类别和方向相同->退出
如果（typeOrient==typeClass）返回；
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”；
}
皮奥特
科扎克
//编辑
更多信息，它在Chrome/Opera上工作，当你尝试水平调整大小时，它会中断。。尽管当您刷新窗口时，它会恢复原样：//

通过在
onReady（）
块外部调用javascript，我得到了与您类似的输出。确保在加载文档后调用javascript。

好了，现在问题已经解决了，我按照这里的想法附加了一个新方法，负责使Chrome重新绘制页面：

var forceRedraw=函数（元素）{…}

现在在所有浏览器中都可以了。

旁注：记住Chrome现在正在运行布局引擎。虽然Blink是WebKit的最新分支，因此与WebKit共享很多代码，但它不是WebKit。看起来它在Chrome版本35.0.1916.27 beta-m中对我很好。至少黑色区域是这样的；在
#imgResizer
中指定的facebook图像未加载。是的，黑色图像很好，“西红柿”图像在显示在图像右侧时消失。我已将url更改为图像1。如何复制问题：a）将窗口最小化为一个长的水平条形状，然后将其最大化（希望黑色在顶部，西红柿在底部），然后将其最小化为上一个形状，黑色在左侧，但西红柿不见了。。如果你刷新页面，看起来一切正常，那么：/无法复制Chrome版本34.0.1847.116 mAndrei我有完全相同的版本。。那么，如果只从左到右调整浏览器的大小，会发生什么情况呢？根据分辨率，“西红柿”是否填充底部或顶部的空间？我要重新启动我的机器并清除缓存。PS它在JSFIDLE上运行良好，当您重新创建自己的html文件时，它会中断：/n不完全确定您的意思。我调用了“manageResizing”函数两次，一次是在加载HTML时（这很好），第二次是在调整大小之后。。这不是直接发生的，而是通过超时，因此在512ms之后，它应该全部加载并准备就绪，因此显示正确，但事实并非如此。我的意思是，在JSFIDLE中，javascript是在文档完全加载后调用的。如果您查看左侧，您可以看到框架和扩展，在第二个组合框中，您可以在javascript“加载”时使用chenge。把它改成最后2个，告诉我结果是否与你得到的结果相似。这是一个棘手的问题。因此，JSFIDLE的问题在于，在调整窗口大小时，它不会改变类（正如它应该改变的那样）。因此，当我将第一个组合框设置为“onLoad”或“onDomReady”时，第一个场景看起来是正确的，如果设置为剩余的两个，那么它就会中断（右侧出现空白）。我相信JSFIDLE中的问题与我的问题来源相同，因为它提供了相同的输出，在加载方面存在某种问题。。就像顺序不正确一样。我也觉得很奇怪，也不知道为什么会发生这种情况，但您可能可以将代码添加到
$（document）.ready（）
中，并从组合框中模拟JSFIDLE在前2页上所做的操作。如果您不使用jQuery，请在internet上搜索非jQuery的替代方案。因此，Andrei离开JSFIDLE，onload工作得非常好。问题发生在Resize上——在不同的浏览器中，加载的顺序似乎不同。试图玩订单时，什么是加载。。但是还没有运气。奇怪的是，它只发生在“垂直”状态下，但是当你在这个特定的窗口形状中刷新页面时，它会正确地加载CSS和所有这些。。调整大小后仅中断：/ 
    <!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>