html - 幅: 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);
}