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

标签 html css image google-chrome firefox

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

最佳答案

伙计,这是您要搜索的解决方案: 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/

关于html - 与 Firefox 相比,图像在 Chrome 中未正确调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44862776/

相关文章:

javascript - 如何根据内容选择 HTML 元素内的文本?

javascript - 如何使用javascript获取html元素的子索引

php - 限制 wordpress 模板默认搜索中的最小字符数

html - @extend 仅部分起作用

html - 使用 img srcset 处理响应式图像

javascript - 引用错误 : function is not defined on the onclick function

html - 当它有焦点时如何在这个 div 周围添加外部颜色?

css - 如何在 div 中水平居中 span 元素

c++ - SFML 图像未加载

html - 当使用 if 语句过滤前 3 个图像时,如何在从左侧开始的数组中显示(即)第 3 个索引(第 4 个)图像?