html - Bootstrap 3上容器的全屏图像

好。我正在尝试实现“ Medium.com风格”的图像对齐方式，使其比其容器大且具有全宽。我做了我所知道的与CSS相关的工作：

img {
position: relative;
left: 50%;
height: auto;
margin: 0px 0 0 -50vw;
width: 100vw;
max-width: 100vw;
}

它几乎可以完成我想做的事情，除了，当我使用Bootstrap的所有12个网格时，由于某种原因，它在左侧添加了一个边框，如您在此提琴中所看到的：https://jsfiddle.net/35f4ntqq/

但是，如果我将col-sm-11更改为col-sm-10（总共变为11 cols），则可以正常工作。

我在这里想念什么？还是做错了...？ ：/

最佳答案

我认为您可以更改img标签的margin属性：

像这样：

img {
  position: relative;
  left: 52%;
  height: auto !important;
  margin: 0px 0 0 -55vw;
  width: 100vw;
  max-width: 100vw !important;
  height: auto !important;
}

见Updated Bootply