忽略网格使图像完全宽度(但保持响应性)

Question

我想要一个图像在多个div是全宽度。

我在以前的回答中做了一些关于这个话题的研究，但不知怎么的，它对我来说并不管用。所以我的情况是：

在页面https://maisoncyclo.ch/collections/de-marchi上，我希望顶部图像的宽度达到它原来的大小(最大为100%，2048x2048px)。问题是，这个图像是在一个<p>和一个内容-div内，因此尊重它的父母的边缘。

是什么解决方案使这个图像完全宽度到用户浏览器大小？

如果我为这种类型的图像添加了一个新的CSS类，那么这个元素需要哪些CSS代码？

当前HTML:

<div id="collection-description" class="desktop-push-2 desktop-8 tablet-6 mobile-3">

<div class="rte">
<p style="text-align: left;"><img src="//cdn.shopify.com/s/files/1/1129/3176/files/DEMARCHI_Header_2048x2048.jpg?9976235918523909588" alt="De Marchi Italien"></p>

当前CSS:

img {
    max-width: 100%;
    border: 0;
}
* {
    margin: 0;
}
*, *:after {
    box-sizing: border-box;
}
Inherited from p
Style Attribute {
    text-align: left;
}
p {
    font-size: 16px;
    margin-bottom: 2em;
}

Inherited from div.rte
.rte {
    text-align: left;
}
Inherited from body.gridlock.collection
body {
    color: #000000;
    background: #ffffff;
    font-size: 16px;
    font-family: Nitti Light, Courier, monospace;
    line-height: 1.5em;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;`

最好的，丹尼尔

Answer 1

它与其说是一种真正的解决方案，不如说是一种黑客攻击，但如果您不能更改html结构，我将使用它。

.rte > p > img {
    position: relative;
    left: -50%;
    max-width: none;
}

-

替代

一个更合适的解决方案是将图像放置在容器div之外，这将设置内容宽度。

下面是一个使用Bootstrap的简单示例

​

.full-w-img > img {
  display:block;
  width:100%;
}

h1,p {
  padding:30px;
}

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <h1> Example </h1>
</div>

<div class="full-w-img">
  <img src="http://p-hold.com/kitten/1000/400">
</div>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore magni soluta cupiditate provident, incidunt, consequuntur iste earum beatae sequi nesciunt vero laboriosam, minima. Sapiente, blanditiis nobis ipsam accusantium neque soluta.</p>
  <p>Corrupti ipsum eius ipsa, autem reiciendis. Officia quia adipisci at, velit odio soluta facilis non ab laboriosam quos optio voluptatibus amet esse eos debitis, et. Ducimus et qui nisi officia.</p>
</div>

​

Answer 2

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full-width img {
    width: 100%;
    height: auto;
    max-height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<div class="container">
   <div class="full-width">
         <img src="/link/exmaple">
      </div>
</div>

来源：https://css-tricks.com/full-width-containers-limited-width-parents/