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);
}

小提琴

以下是一个示例，您可以测试和播放：https://jsfiddle.net/Cthulhu/nbmy5mjf/1/

问题

如何从IE和Edge中删除/隐藏滚动条？

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

Answer 1

使用

body {
  overflow: hidden
}

或只是：

body {
  overflow-x: hidden
}

然后放弃calc()它没有做任何事情。

段

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

1 个答案:

段