与 Firefox 相比，图像在 chrome 中未正确调整大小答案

【问题标题】：image not correctly resized in chrome, compared to Firefox与 Firefox 相比，图像在 chrome 中未正确调整大小
【发布时间】：2017-12-05 09:02:45
【问题描述】：

我有一个显示图像的 html 页面。当图像大于浏览器的窗口时，图像会调整大小（保持相同的比例）以适应 Firefox 的窗口。但是在 Chrome 中，图像被压缩了

这里是html代码：

<div class="container">
  <div class="auto">
    <img class="full-width" src="http://laurent.delrocq.free.fr/test/img-1.jpg" />
    <div class="absolute">
        <img src="http://laurent.delrocq.free.fr/test/left.png" alt="#" class="left">
        <img src="http://laurent.delrocq.free.fr/test/right.png" alt="#" class="right">
    </div>
  </div>
</div>

和css：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
}
.auto {
        width:auto;
        height:auto;
        position:relative;
        display:inline-block;
    }

    .absolute {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        z-index:2;
    }

    .left {
        position:absolute;
        top:50%;
        left:15px;
        transform: translateY(-50%);
    }

    .right {
        position:absolute;
        top:50%;
        right:15px;
        transform: translateY(-50%);
    }

  .full-width {
    width:auto;
    max-width:100%;
    max-height: 100vh;
    height:100%;
  }

如何更改代码以使其在 Firefox 和 Chrome 上都能正常工作（调整大小）？

【问题讨论】：

标签： html css image google-chrome firefox

【解决方案1】：

伙计，这是您搜索的解决方案： https://jsfiddle.net/d5z3fnjh/1/

检查“.container”、“.auto”和“.full-width”的宽度和高度值：

.full-width {
  width:100%;
}
.container {
  text-align: center;
  width: 100vw;
}
.auto {
  width:100%;
  position:relative;
  display:inline-block;
}

更新：这里有一个 JS 的解决方案： https://jsfiddle.net/d5z3fnjh/4/

【讨论】：

感谢您的建议。它在 Firefox 和 Chrome 上的工作方式相同。不幸的是，它删除了我设置的行为，以便图像始终完全包含在窗口中：当窗口的高度太小时时添加滚动条。所以我还在寻找解决方案...
添加了最大高度和溢出：隐藏。抱歉，无法编辑之前的评论。
没有滚动条了，但是当你改变窗口高度时，图像会被截断。所以这仍然不是我正在寻找的解决方案......
如果您可以使用 JS - 这可能是您搜索的解决方案（需要在浏览器中查看）：jsfiddle.net/d5z3fnjh/4
感谢使用 js 的想法。我会考虑我能做些什么。注意：提供的jsfiddle不提供所需的行为：如果窗口太大，箭头会超出图像+ js中的规则不应与窗口的宽度/高度比有关，而是与图像有关。跨度>

【解决方案2】：

我终于用js根据图片大小设置了正确的div大小。

html:

<div class='fill-screen'>
<img id="photo" class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
<div id="over_image">
  <div class="left">
    <a href="https://en.wikipedia.org/wiki/Arrow_(symbol)#/media/File:U%2B2190.svg" style="outline:0">
      <img src="http://laurent.delrocq.free.fr/test/left.png" alt="#">
    </a>
  </div>
  <div class="right">
    <a href="https://en.wikipedia.org/wiki/Arrow_(symbol)#/media/File:U%2B2192.svg">
      <img src="http://laurent.delrocq.free.fr/test/right.png" alt="#">
    </a>
  </div></div>
</div>

css:

div.fill-screen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}
img.make-it-fit {
    max-width: 100%;
    max-height: 100%;
}

#over_image {
    margin:0px;
    padding:0px;
    display: inline-block;
    text-align: center;
    color: #fff;
    position: absolute;

    height:100%;
    background: rgba(0,0,0,.5);
}



.left{
    opacity:0;
    position:absolute;
    width:20%;
    height:100%;
}

.left a, .right a{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.right{
    opacity:0;
    position:absolute;
    margin-left: 80%;
    width:20%;
    height:100%;
}

.left:hover{
  opacity:1;
}

.right:hover{
  opacity:1;
}

js:

function resizeDiv()
{
  var img = document.getElementById('photo'); 

  var width  = img.clientWidth;
  var height = img.clientHeight;
  var left   = img.offsetLeft;
  var top    = img.offsetTop;

  document.getElementById('over_image').style.width= width + 'px';
  document.getElementById('over_image').style.height= height + 'px';
  document.getElementById('over_image').style.top= top + 'px';
  document.getElementById('over_image').style.left= left + 'px';
}

$(document).ready(function() {
  resizeDiv();
})

$(window).resize(function() {
    resizeDiv();
})

对应的jsfiddle在这里：https://jsfiddle.net/4kxjt813/

【讨论】：