html - CSS での幅 100% の画像の負のマージン

Question

私はこの（単純化された）状況を持っています：

<div class="page-content">
  <p>text</p>
  <p><img src="" /></p>
  <p>text</p>
  <!-- ... -->
</div>

と：

.page-content {
  padding: 0 20px;
}

.page-content img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

このようにして、div 内に常にパディングがあります.page-content(ここにコピーしたものよりも多くのものが含まれています)。画像は、ページの幅からパディングを引いたものを超えることはできません。

どの画面サイズでもうまく機能します。

例：

ここに画像の説明を入力

ただし、電話画面では画像を全幅にしたい(親の20pxパディングをバイパスする)。

すなわち：

ここに画像の説明を入力

親 ( <p>) に負のマージン ( margin: 0 -20px;) がある場合、問題を解決できますが、html ファイルはマークダウンファイルから Jekyll によって生成され、クラスを追加できません。

.page-contentパディングを削除して各子に設定する以外に、これを行う方法が見つかりません。私はむしろやりたくないことです。

すべての画面サイズで動作するようにしたいので、固定幅も設定できません。

CSS で親を選択する方法はありますか? それとも私が知らない別の機能ですか？

ありがとう。

score 1 · Accepted Answer

あなたはあなた自身の質問に答えました。パディングを削除し、子要素に設定します。（または、子要素にマージンを使用してください。それが実際の後であるためです）これが最善の解決策です。

代替手段: position: absolute; などの画像の配置を使用できます。これにより、親のフローから外されるため、パディングは無視されますが、画像がどこに行く必要があるかを正確に知る必要があります。オプション 1 の方がはるかに優れています。

score 0 · Accepted Answer

上記の提案と同様に、接続しているデバイス（使用している環境がわからない）または画面の幅に応じてcssを変更できますが、このアプローチを行う場合は画面サイズなどを慎重に考慮する必要があります

つまり
、@media スクリーンと (max-width:400px) { p { margin: 0 -20px; } }

p だけでなく、より具体的にしたいと思うでしょう。

score 0 · Accepted Answer

ここから承認されたソリューションを使用し、中規模から大規模のディスプレイ用の @media クエリを追加して、マージンを維持します。

@media screen and (min-width: 600px) {
  .img-wrapper {
    margin: 0 0;
  }
}

また、width=100%;あなたのimgを入れてください。

5 に答える 5