最近、獨(dú)立したレイアウトで流體畫像を処理するのは非常に簡単です。ただし、より複雑なインターフェイスの場(chǎng)合、このカードなどのレスポンシブ要素內(nèi)に畫像を配置する必要があることがよくあります。
この畫像は、セマンチックなコンテンツであり、裝飾にのみ使用されると仮定します。これはbackground-imageを使用するのに最適です。また、この畫像にはオブジェクトが含まれているため、レスポンシブレイアウトの場(chǎng)合はどの部分もトリミングできないため、 background-size: contain選択します。
問題は、モバイルデバイスでは、このカードの向きが変化し、垂直になり、畫像が上部にあります。これは、あらゆるタイプのCSSレイアウトテクノロジーを使用してこれを行うことができます。また、CSSグリッドまたは弾性ボックスを使用するのが最善です。
ただし、小さな畫面をテストすると、屬性がcontainいるため、次の結(jié)果が得られます。
これは理想的ではありません。畫像はアスペクト比を維持するようにサイズ変更されており、詳細(xì)をトリミングしないため、畫像が重要であり、トリミングされてはならないかどうかcoverためにbackground-size変更することはできません。
この時(shí)點(diǎn)で、次の試みは馴染みがあるかもしれません。背景ではなく、畫像をインラインで配置します。
デスクトップデバイスでは、これは正常に機(jī)能します。
また、モバイルデバイスにも適しています。
しかし、小さな畫面では、すべての固定サイズのために畫像の割合が歪んでしまいます。
畫像、カード、弾性プロパティを調(diào)整し、前後に調(diào)整するのに何時(shí)間も費(fèi)やすことができます。または、できます...
バックグラウンドからメインコンテンツを分離します
これは、レスポンシブ畫像の柔軟性と柔軟性を高めるための基礎(chǔ)です。すべての場(chǎng)合では不可能ですが、多くの場(chǎng)合、特にそのようなアプローチが事前に計(jì)畫されている場(chǎng)合、設(shè)計(jì)に少しだけの努力で達(dá)成できます。
次の反復(fù)では、イチゴの畫像を透明な背景に配置し、CSSを使用してラスター畫像に青色を設(shè)定します。サンプルスペースを変更して、デモでビューポートサイズを使用し続けてください！
スタイルを慎重に見ると、畫像を含むDIVにパディングを追加して、イチゴが端に近づきすぎないようにすることに注意してください。私たちは、このパディングでどれだけ近くまたは遠(yuǎn)くにいるかを完全に制御できます。
また、ネガティブマージンを使用して外部カードラッピングのパディングを補(bǔ)正することに注意してください。そうしないと、畫像の周りに空白があります。
インライン畫像にオブジェクトフィット屬性を使用します
以前のデモは機(jī)能しますが、このアプローチを改善することができます。これまでのところ、畫像はセマンティックフリーコンテンツであると想定していましたが、このレイアウトでは、畫像のイラストも単なる裝飾以上のものである可能性があります。
この場(chǎng)合、これは実際にはデータの損失と同等であるため、畫像のトリミングを絶対に望んでいません。これを防ぐために、 object-fitプロパティで行うことができる背景の代わりに畫像をインラインで配置することをお?jiǎng)幛幛筏蓼埂?/p>
バックグラウンドからイチゴを抽出しました。これは現(xiàn)在インライン要素ですが、同じ畫像divに背景色を保持しています。
最後に、 object-fit: contain 100%幅を含むと、窓のサイズを変更し、イチゴのアスペクト比を維持できます。ただし、このアプローチの欠點(diǎn)は、畫像のデスクトップバージョンに固定された高さを設(shè)定する必要があることです。または、それ以外の場(chǎng)合は、セット幅の割合に従います（レイアウトが変更されるとレイアウトが変更されます）。これらのカードをさまざまな量のテキストで生成する必要がある場(chǎng)合、テキストは包裝され、物事が制限されすぎる可能性があります。
近日公開：アスペクト比
上記の問題の解決策は、今後のaspect-ratioプロパティを通じてまもなく実裝される可能性があります。これにより、要素の固定スケールを設(shè)定することができます。たとえば、次のようになります。
.el {
アスペクト比：16 /9;
}
これは、固定された高さを排除し、計(jì)算したアスペクト比に置き換えることができることを意味します。たとえば、最後の例のデスクトップブレークポイントの寸法は次のようになります。
。畫像 {
/ * ... */
高さ：184px;
幅：318px;
}
aspect-ratioを使用して、高さ宣言を削除し、計(jì)算して最寄りの184スケールを取得できます。
。畫像 {
/ * ... */
幅：318px; /*參照幅*/
高さ：控えめ。 /*メディアクエリの外側(cè)の高さセットをリセット*/
アスペクト比：159 /92; /*高さ184pxに近い*/
}
詳細(xì)を知りたい場(chǎng)合は、この記事の今後の屬性を調(diào)べることができます。
最後に、可変スケールレイアウトで信頼できるレスポンシブ畫像を?qū)g現(xiàn)する方法は複數(shù)あります。しかし、この作業(yè)を容易にするためのトリック - そしてより良い - は、必ずしもCSSにあるわけではありません。前景を背景から分離するか（私たちが行ったように）、またはエッジのかなりの部分がトリミングされていても機(jī)能する特定の畫像を選択するかどうかにかかわらず、畫像を調(diào)整するだけで簡単です。
以上が可変比率レイアウト內(nèi)の流體畫像の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Autoprefixerとは何ですか？それはどのように機(jī)能しますか？
Jul 02, 2025 am 01:15 AM
Autoprefixerは、ターゲットブラウザスコープに基づいてCSS屬性にベンダープレフィックスを自動(dòng)的に追加するツールです。 1.エラーで接頭辭を手動(dòng)で維持する問題を解決します。 2. PostCSSプラグインフォーム、CSSを解析し、プレフィックスする必要がある屬性を分析し、構(gòu)成に従ってコードを生成する屬性を分析します。 3.使用手順には、プラグインのインストール、ブラウザーリストの設(shè)定、ビルドプロセスでそれらを有効にすることが含まれます。 4。メモには、接頭辭を手動(dòng)で追加しない、構(gòu)成の更新を保持すること、すべての屬性ではなくプレフィックスを維持することが含まれ、プリ??プロセッサでそれらを使用することをお?jiǎng)幛幛筏蓼埂?/p>
粘著性ヘッダーまたはフッターを作成するためのCSSチュートリアル
Jul 02, 2025 am 01:04 AM
to CreateStickyheadersandfooterswithcss、使用ポジション：Stickyforheaderswithtopvalueandz-index、ParentContainersdon’trestrictit.1.forstickyheaders：Setposition：Sticky、Top：0、Z-Index、およびBackgroundColor.2
ロードスピナーとアニメーションを作成するためのCSSチュートリアル
Jul 07, 2025 am 12:07 AM
CSSロード回転子を作成するには3つの方法があります。1。境界の基本回転子を使用して、HTMLとCSSを介してシンプルなアニメーションを?qū)g現(xiàn)します。 2。複數(shù)のポイントのカスタム回転子を使用して、異なる遅延時(shí)間を経てジャンプ効果を?qū)g現(xiàn)します。 3.ボタンに回転子を追加し、JavaScriptを介してクラスを切り替えて、読み込みステータスを表示します。各アプローチは、ユーザーエクスペリエンスを向上させるために、色、サイズ、アクセシビリティ、パフォーマンスの最適化などのデザインの詳細(xì)の重要性を強(qiáng)調(diào)しています。
モバイルファーストデザインに焦點(diǎn)を當(dāng)てたCSSチュートリアル
Jul 02, 2025 am 12:52 AM
Mobile-firstcsssdesignRequiresTtingtheviewportatatag、使用、stylumsmallscreensup、optimingTouchTargets.first.second、cecond、em、orreminsteadofpixelseders.ths.thsthird、writebasethirdird、addtocontrolscaling.second、addtocontrolscaling.second
本質(zhì)的にレスポンシブなグリッドレイアウトを作成する方法は？
Jul 02, 2025 am 01:19 AM
本質(zhì)的な応答性のあるグリッドレイアウトを作成するために、COREメソッドはCSSGridのRepeat（auto-fit、minmax（））モードを使用することです。 1.グリッドテンプレートコラムの設(shè)定：繰り返し（Auto-Fit、MinMax（200PX、1FR））繰り返して、ブラウザが列の數(shù)を自動(dòng)的に調(diào)整し、各列の最小幅と最大幅を制限します。 2。ギャップを使用してグリッド間隔を制御します。 3.コンテナは、幅などの相対ユニットに設(shè)定する必要があります。100％、およびボックスサイズを使用してください。幅の計(jì)算エラーを回避し、マージンで中央に配置する必要があります。 4.オプションで、行の高さとコンテンツのアライメントを設(shè)定して、行などの視覚的な一貫性を向上させます
ビューポート內(nèi)でグリッド全體を中央に配置する方法は？
Jul 02, 2025 am 12:53 AM
グリッドレイアウト全體をビューポートの中心にするには、次の方法で実現(xiàn)できます。1。マージンを使用して水平センタリングを?qū)g現(xiàn)し、固定レイアウトに適した固定幅を設(shè)定するためにコンテナを設(shè)定する必要があります。 2。FlexBoxを使用して、外側(cè)の容器內(nèi)のJustify-ContentおよびAlign-Itemsプロパティを設(shè)定し、Min-Height：100VHを組み合わせて、フルスクリーンディスプレイシナリオに適した垂直および水平センタリングを?qū)g現(xiàn)します。 3. CSSGridのPlace-ITEMSプロパティを使用して、親コンテナをすばやく中央に集中させます。これは、シンプルで最新のブラウザからの適切なサポートがあり、同時(shí)に、親コンテナが十分な高さを確保する必要があります。各方法には、適用されるシナリオと制限があります。実際のニーズに応じて適切なソリューションを選択するだけです。
@supportsを使用したCSSの機(jī)能検出とは何ですか？
Jul 02, 2025 am 01:14 AM
featuredEtectionincssusing@supportscheckcksifabrowssaspificfeatureforeapplyingStyles.1.itusesconditionalcssalcssbasedsbasedonproperty-valuepairsなど、supports（display：grid）.2.thismethodensuresuresuresuresuresurecompativitionivitionivitionaindavoidavoidsrioushsriasiondrell
CSSブラウザの互換性の問題とプレフィックスに対処します
Jul 07, 2025 am 01:44 AM
CSSブラウザの互換性とプレフィックスの問題に対処するには、ブラウザサポートの違いを理解し、ベンダーのプレフィックスを合理的に使用する必要があります。 1. FlexBoxやグリッドのサポート、位置：粘著性の無効、アニメーションのパフォーマンスなどの一般的な問題を理解することは異なります。 2. CANIUSE確認(rèn)機(jī)能サポートステータスを確認(rèn)します。 3. -webkit-、-moz-、-ms-、-o-およびその他のメーカーのプレフィックスを正しく使用します。 4.自動(dòng)的にプレフィックスを追加するためにAutoprefixerを使用することをお?jiǎng)幛幛筏蓼埂?5. PostCSSをインストールし、ターゲットブラウザを指定するようにBrowserSlistを構(gòu)成します。 6.建設(shè)中の互換性を自動(dòng)的に処理します。 7. Modernizr検出機(jī)能は、古いプロジェクトに使用できます。 8.すべてのブラウザの一貫性を追求する必要はありません、
