html - 与 Firefox 相比，图像在 Chrome 中未正确调整大小

Question

我有一个显示图像的 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 上都能正常工作(调整大小)？

Answer 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/