Width: Calc() On Img Is Not Relative To Parent Container

I'm currently working on a layout where I have to use negative margins on the images. The images are inside

, which has a padding. To make the imag

Solution 1:

MDN calc():

The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

The + operator must be surrounded by whitespace.

Therefore it should be width: calc(100% + 0.75em) rather than 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>

Share