Question

我创建了一个html / javascript / css页面，在“轮播”中显示照片，用户可以点击左右箭头来更改照片。旋转木马本身，父母/容器，高500像素，父母宽100％。它内部的图像最大宽度为100％，最大高度为100％。换句话说，无论宽高比如何，它都适合imgCarousel。

这适用于大多数浏览器。我已经确认它适用于IE，Edge，Chrome和Firefox。但是，它在Safari中不起作用。我个人无法访问Mac，但我知道它在Safari中不起作用，因为其他人在我面前查看了该页面。它在某些Android移动浏览器中也不起作用（尽管它适用于Android Chrome）。

似乎在这些不起作用的浏览器中，top实际上并未设置为50％，但转换仍然正常工作。这是基于目视检查。此外，似乎图像尺寸不正确。它延伸到整个宽度，高度超过100％;

不幸的是，我无法在任何这些浏览器上使用开发人员工具进行测试，因为我无法访问Mac，而且我似乎找不到可以以相同容量使用的移动浏览器的开发人员工具。

如果此处没有违反协议，我可以链接到相关页面。

我做了一些研究，看看是否有任何兼容性问题/修复，但我在这项研究中没有成功。如果有人知道我可以包含兼容性修补程序，请告诉我。

谢谢。

.imgCarousel {
    display: flex;
    justify-content: space-between;

    vertical-align: middle;

    height: 500px;
    background-color: black;
    text-align: center;
    margin: auto;
}

.imgCarousel img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);

    max-height: 100%;
    max-width: 100%;
    object-fit: contain;

    cursor: pointer;

}

Answer 1

尝试添加此列表，包括歌剧前缀：

    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);

浏览器中的图像匹配和定位兼容性

1 个答案: