将 zoom:80% 应用于某些浏览器，但不适用于 Internet Explorer

Question

我想解决我的homepage 上的一个问题，即当屏幕宽度在 1280 像素和 1700 像素之间时（左侧文本为蓝色），主顶部轮播中的第一张图片不会显示所有内容。通过在<section class="rotator-section"> 上使用 css “缩放”并将其设置为 80%：
@media screen and (min-width: 1280px) and (max-width: 1765px){ .rotator-section {zoom:80%;}}
这主要解决了某些宽度之间的问题。不幸的是，缩放在 Firefox 中根本不起作用，并在 IE 中产生不需要的结果（图像保持相同的不需要的大小，窗口的其余部分显示空白）。
为了至少对 Chrome、Opera、Edge 进行良好修复而不在 IE 中创建不需要的结果，我想应用以下 @media not query 以便 IE 10 和 11 不应用此 css：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .rotator-section {zoom:100% !important;} }
这不是一个完美的解决方案。由于我的许多网站访问者使用 IE11、10 和 9 和 Firefox。 这些浏览器的解决方案是什么？

Answer 1

我建议您根据屏幕大小使用不同的图像可能有助于正确显示图像。

例子：

/* For devices smaller than 1200px: */
body {
  background-image: url('img_smallflower.jpg'); 
}

/* For devices 1200px and larger: */
@media only screen and (min-device-width: 1200px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Answer 2

有一种更简单的方法可以解决此问题。背景图像的定位是由一点 CSS 引起的：

#homepage-rotator>div:nth-child(2) {
    background-position: right;
}

这会迫使该图像未对齐。尝试删除该 CSS，或更改它：

#homepage-rotator>div:nth-child(2) {
    background-position: left;
}