Ширина: calc() на img не относится к родительскому контейнеру

Question

В настоящее время я работаю над макетом, где мне приходится использовать отрицательные поля на изображениях. Изображения находятся внутри <div class="entry-content">, у которого есть отступы. Чтобы изображения в пределах entry-content выходили за пределы прокладок, я использую отрицательные поля. Чтобы растянуть изображение за пределами <div class="entry-content">, я использовал width:calc(100%+margin).

Это не работает должным образом, хотя - 100%, по-видимому, является шириной изображения, а не шириной entry-content. Я хочу, чтобы ширина изображения была относительно entry-content, так как изображение будет использоваться в ответном макете.

В настоящее время я нахожусь в самом начале процесса, поэтому у меня все еще есть фиксированная ширина на body.

HTML

<!-- other unrelated code such as header--> 
<div class="entry-content"> 
    <p> 
     <img src="http://www.hellothere.se/blog/wp-content/uploads/2014/11/TKD-Promo-title-940x400.jpg" /> 
    </p> 
</div> 

CSS

body { 
    width: 340px; 
} 

.entry-content{ 
    padding: 0 0.75em; 
    position: relative; 
} 

.entry-content img { 
    display: block; 
    margin: 0 -0.75em; 
    width: calc(100%+0.75em); 
} 

Answer 1

MDN calc():

В + и - операторы всегда должны быть окружены пробелами. Например, операнд calc(50% -8px) будет анализироваться как процент, за которым следует отрицательная длина, недопустимое выражение, а операнд calc(50% - 8px) - это процент, за которым следуют знак минус и длина. Кроме того, calc(8px + -50%) рассматривается как длина, за которой следует знак плюс и отрицательный процент. Операторы * и / не требуют пробелов, но их добавление для согласованности разрешено и рекомендуется.

Оператор + должен быть окружен пробелами.

Поэтому она должна быть width: calc(100% + 0.75em), а не calc(100%+0.75em)

body { 
 
    width:340px; 
 
} 
 
.entry-content { 
 
    padding: 0 0.75em; 
 
    position:relative; 
 
} 
 
.entry-content img { 
 
    display:block; 
 
    margin: 0 -0.75em; 
 
    width: calc(100% + 0.75em); 
 
}

<div class="entry-content"> 
 
    <p> 
 
     <img src="//placehold.it/200" /> 
 
    </p> 
 
</div>