大于容器的图像在 IE 和 Edge 上创建滚动条

Question

背景

我需要一个比其容器更大的图像。这个想法是让用户可以选择将全宽图像添加到内容页面，如果他们愿意的话。

问题

我将 calc(100vw) 与 left: 50%; 和 translateX(-50%) 一起使用。这在 Chrome 和 Firefox 中完美运行。但是IE11和Edge带来了水平滚动条。

代码

HTML

<div>
  <img />
</div>

CSS

div {
    margin: 0 auto;
    width: 400px;
}

img {
    display: block;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: calc(100vw);
}

Fiddle

这里有一个例子，你可以测试和玩：https://jsfiddle.net/Cthulhu/nbmy5mjf/1/

问题

如何remove/hide IE 和 Edge 的滚动条？

我认为这是由于图像位置的计算方式所致。但是，我注意到如果我从图像中删除 display: block;，Firefox 和 Chrome 也会显示滚动条。有什么想法吗？

Answer 1

使用

body {
  overflow: hidden
}

或者只是：

body {
  overflow-x: hidden
}

并删除 calc() 它在那里没有做任何事情。

片段

body {
  overflow: hidden
}
div {
  border: 5px solid red;
  margin: 0 auto;
  width: 400px;
}
img {
  display: block;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden
}

<div>
  <img src="http://randomrab.com/wp-content/uploads/2015/05/thumpimage.jpg" />
</div>

大于容器的图像在 IE 和 Edge 上创建滚动条

image larger than container creates scrollbar on IE and Edge

css

internet-explorer

position

scrollbar

css-transforms

片段