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

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

检查＆＃39; .container＆＃39;，＆＃39; .auto＆＃39;和＆＃39; .full-width＆＃39;宽度和高度值：

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

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

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

2 个答案: