グリッドを無視してイメージを全幅にします（ただし反応はあります）

Question

複数のdiv内のイメージを全幅にしたいと考えています。

私はこのトピックに関する以前の回答でいくつかの研究を行ったが、何とか私のためにうまくいかなかった。だから私の状況は次のとおりです。

ページ上https://maisoncyclo.ch/collections/de-marchiトップイメージを元のサイズ（最大100％、2048x2048px）まで拡大したいと考えています。問題は、この画像が<p>とcontent-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、外画像を配置することになります。ブートストラップ

.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>