宽度：计算值（）IMG上不能相对于父容器(Width: calc() on img is not r

我目前工作的一个布局，我必须在图像上使用负利润率。 的图像是内部<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> 

文章来源: Width: calc() on img is not relative to parent container