我怎樣才能使圖像完全流血，但填充內容

Question

我的HTML標記主要是段落，標題爲&。我無法編輯標記，但我很喜歡將內容填充到40像素，但將圖像的全寬度設置爲左側40像素和右側40像素。

沒有jQuery的最佳方法是什麼？

這裏的HTML

<p>But how? Genius in the Sperm Whale? Has the Sperm Whale ever written a book, spoken a speech?</p> 

<p>Champollion deciphered the wrinkled granite hieroglyphics. But there is no Champollion to decipher the Egypt of every man's and every being's face.</p> 
<p><img src="http://lorempixel.com/400/200/sports" /></p> 
<h2>If the Sperm Whale be physiognomically a Sphinx</h2> 

<p>In the full-grown creature the skull will measure at least twenty feet in length. Unhinge the lower jaw, and the side view of this skull is as the side of a moderately inclined plane resting throughout on a level base.</p> 

<p>It is plain, then, that phrenologically the head of this Leviathan, in the creature's living intact state, is an entire delusion.</p> 

而CSS

p,h2{padding:0 40px;} 
img{margin-left:-40px;width:100%;} 

https://jsfiddle.net/xea3m64q/1/

的佈局是流體，所以我真的不想要固定寬度，如果我能幫助它。

Answer 1

你只需要修改你的CSS有這樣的：

p, h2 { 
    padding:0 40px 0 40px; /*Just so that we can see why I added the 80px. (top, right, bottom, left)*/ 
} 

img { 
    margin-left: -40px; /*-40px to make up for the parent's padding to the left*/ 
    width: calc(100% + 80px); /*You need to change to this.*/ 
}