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
<div class="entry-content">, which has a padding. To make the images within
entry-content go outside the paddings, I use negative margins. To stretch the image outside the
<div class="entry-content"> I used
This doesn’t work as expected though - the 100% seems to be the image’s width rather than the width of
entry-content. I want the image’s width to be relative to
entry-content, as the image will be used in a responsive layout.
I’m currently very early in the process, so I still have a fixed width on
-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
/operators do not require whitespace, but adding it for consistency is allowed, and recommended.
+ operator must be surrounded by whitespace.
Therefore it should be
width: calc(100% + 0.75em) rather than