宽度：img 上的 calc() 与父容器无关

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():

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.

+ 运算符必须用空格包围。

因此应该是 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>

宽度：img 上的 calc() 与父容器无关

Width: calc() on img is not relative to parent container

html

css

image

calc