Question

我试图完成这个：

.child-div {
width: 100vw;  
position: relative;  
left: calc(-50vw + 50%);}

但是我不想使用“child-div”来定位img-class，如下所示：

.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}

当我这样做时，我得到一个水平滚动条，我不知道为什么。任何人都可以向我解释这个。如果可能，提供解决方案？

由于

Answer 1

由于您使用的是position: relative，因此将图像向左移动并不会将其实际移到文档流之外，因此，根据浏览器的说法，它仍然认为图像已经突出显示。 / p>

因为没有包含元素，所以也不需要在一个百分比上使用视口宽度。出于某种原因，使用视口宽度而不是百分比会在滚动条下方的右侧添加一些额外空间，即使图像处于绝对位置也是如此。

然而，这有效：

.parent-div img {
  position: absolute;
  left: 0;
  width: 100%;
}

您可能还想从图片代码中删除width="1400px"，因为它不是必需的，可能会在以后导致继承问题。

Answer 2

我要去

.parent-div img {
display:block;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}

暂时在img-class上，隐藏overflow-x，直到出现隐藏滚动条的内容，阻止用户查看内容。

使用此方法的原因，而不是关闭＆＃34;之前的＆＃34;容器（这将是显而易见的选择）是我想要一个wordpress blogtemplate的快速解决方案，当从后编辑器插入媒体时，给定特定img类的所有图像将拉伸全宽度。

下面是我正在寻找的效果的一个例子（theverge.com显然正在关闭容器）：
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn