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;
}

UPD：
这是JS的解决方案：
https://jsfiddle.net/d5z3fnjh/4/