SVG イメージを使用してレスポンシブ グリッド エリアを作成できません

Question

<p>SVG 画像を含むレスポンシブ グリッド エリアを作成しようとすると、グリッド エリアの幅が任意になったり、画像を停止せずに特定のポイントまで拡大または縮小できないなどの奇妙な動作が発生します。私が得た最も近いものは次のとおりです: </p> <p> <pre class="ブラシ:css;ツールバー:false;">* { ボックスのサイズ設定: ボーダーボックス; } 体 { マージン: 0; } ヘッダー { 表示: グリッド; グリッド テンプレート列: 自動 1fr; 背景色: 緑; パディング: 1レム; } 画像 { 幅: 100%; 最大幅: 25vw; 最小幅: 12rem; 背景色: ピンク; } ディビジョン { 背景色: 赤; テキスト整列: 中央; } ナビ { 背景色: 黄色; グリッド列: スパン 2; }</pre> <pre class="brush:html;toolbar:false;"><header> <img src="data:image/svg xml,"> <div> <h1>見出し</h1> <p>テキスト行 1</p> <p>テキスト行 2</p> <p>テキスト行 3</p> </div> <ナビ> <a href="#">メニュー項目 1</a> <a href="#">メニュー項目 2</a> <a href="#">メニュー項目 3</a> <a href="#">メニュー項目 4</a> <a href="#">メニュー項目 5</a> <a href="#">メニュー項目 6</a> </ナビ> </header></pre> </p> <p>高さ、最小高さ、最大高さ、さらに幅内でクリップを使用してみましたが、ほとんど成功しませんでした。既存の返信のいくつかが示唆しているように、私が理解に欠けているだけかもしれませんが、それを修正する方法がわかりません。 </p>

Answer 1

画像列の幅は任意ではありません。

グリッド コンテナは最初に構造をレイアウトします。 。 では、 がアイテムを整理しています。

これは、画像が自然な幅 (100%) になると、最初の列のサイズが変更されることを意味します。

項目が 幅: 50% で表示される場合、ブラウザーは戻って列のサイズを変更しません。

つまり、列のサイズは任意ではなく、画像の自然な幅です。

(これはおそらくバグまたは CSS の制限です。)

画像が全幅の場合、この問題は発生しないことに注意してください:

リーリー リーリー

width: 150% を試すと、次の結果が返されます:

リーリー リーリー

---

＃＃＃＃＃＃サイドノート＃＃＃＃＃＃

一般に、CSS グリッドとフレックスボックスを使用する場合、イメージをコンテナーの子として作成することはお勧めできません。 言い換えれば、一般的には、画像をグリッド アイテムまたはフレックス アイテムとして使用しないことが最善です。

バグやブラウザごとのレンダリングの違いが多すぎます。

多くの場合、単純に画像を

div

内に配置する (

div

をグリッド項目にする) だけで問題は解決します。 画像をグリッドまたはフレックス項目として使用しないでください:

グリッド セル サイズに適合する画像を取得するにはどうすればよいですか?

• CSS グリッド内の画像を含むセルが占有するスペースが多すぎます
• Flexbox で画像を拡大縮小する
• Flexbox 列の画像が Chrome で正しくレンダリングされない
• 幅と高さを定義した後、Flex コンテナ内の画像が中央に配置されません