0

パディング付きの要素があるサイトがあります。パディングに関係なく、画像をコンテナの全幅にしたいので、パディングに等しい負のマージンを追加して、画像が端まで伸びるようにしました。レスポンシブ画像を使用すると問題が発生します。彼らは負のマージンを無視し、コンテナサイズとパディングまで押しつぶします。

例：

<article style="padding:20px">
<img style="margin:0 -20px;">
</article>

応答のない世界では、これは正常に機能します。レスポンシブ画像でこれをどのように達成しますか。記事タグを閉じて再度開くことができることはわかっていますが、これにより実際のコードで他の問題が発生するため、別の問題が発生することを期待しています。

4

1 に答える 1

3

ほとんどの場合、唯一の方法は画像をdivにラップすることです。

<article>
    <p>...</p>
    <div class="img-wrapper">
        <img src="..." />
    </div>
    <p>...</p>
</article>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

cssで

article {
    padding: 20px;
}
.img-wrapper {
    margin: 0 -20px; /* minus left/right padding of article */
    text-align: center; /* center small images */
    line-height: 0; /* remove possible gap below image */
}
​​.img-wrapper > img {
    max-width: 100%; /* max-width now is relative to .img-wrapper */
    height: auto; /* to keep aspect ratio */
}​​
于 2012-11-17T11:14:12.437 に答える