検索

可変比率レイアウト内の流体画像

最近、独立したレイアウトで流体画像を処理するのは非常に簡単です。ただし、より複雑なインターフェイスの場合、このカードなどのレスポンシブ要素内に画像を配置する必要があることがよくあります。

この画像は、セマンチックなコンテンツであり、装飾にのみ使用されると仮定します。これはbackground-imageを使用するのに最適です。また、この画像にはオブジェクトが含まれているため、レスポンシブレイアウトの場合はどの部分もトリミングできないため、 background-size: contain選択します。

問題は、モバイルデバイスでは、このカードの向きが変化し、垂直になり、画像が上部にあります。これは、あらゆるタイプのCSSレイアウトテクノロジーを使用してこれを行うことができます。また、CSSグリッドまたは弾性ボックスを使用するのが最善です。

ただし、小さな画面をテストすると、属性がcontainいるため、次の結果が得られます。

これは理想的ではありません。画像はアスペクト比を維持するようにサイズ変更されており、詳細をトリミングしないため、画像が重要であり、トリミングされてはならないかどうかcoverためにbackground-size変更することはできません。

この時点で、次の試みは馴染みがあるかもしれません。背景ではなく、画像をインラインで配置します。

デスクトップデバイスでは、これは正常に機能します。

また、モバイルデバイスにも適しています。

しかし、小さな画面では、すべての固定サイズのために画像の割合が歪んでしまいます。

画像、カード、弾性プロパティを調整し、前後に調整するのに何時間も費やすことができます。または、できます...

バックグラウンドからメインコンテンツを分離します

これは、レスポンシブ画像の柔軟性と柔軟性を高めるための基礎です。すべての場合では不可能ですが、多くの場合、特にそのようなアプローチが事前に計画されている場合、設計に少しだけの努力で達成できます。

次の反復では、イチゴの画像を透明な背景に配置し、CSSを使用してラスター画像に青色を設定します。サンプルスペースを変更して、デモでビューポートサイズを使用し続けてください!

スタイルを慎重に見ると、画像を含むDIVにパディングを追加して、イチゴが端に近づきすぎないようにすることに注意してください。私たちは、このパディングでどれだけ近くまたは遠くにいるかを完全に制御できます。

また、ネガティブマージンを使用して外部カードラッピングのパディングを補正することに注意してください。そうしないと、画像の周りに空白があります。

インライン画像にオブジェクトフィット属性を使用します

以前のデモは機能しますが、このアプローチを改善することができます。これまでのところ、画像はセマンティックフリーコンテンツであると想定していましたが、このレイアウトでは、画像のイラストも単なる装飾以上のものである可能性があります。

この場合、これは実際にはデータの損失と同等であるため、画像のトリミングを絶対に望んでいません。これを防ぐために、 object-fitプロパティで行うことができる背景の代わりに画像をインラインで配置することをお勧めします。

バックグラウンドからイチゴを抽出しました。これは現在インライン要素ですが、同じ画像divに背景色を保持しています。

最後に、 object-fit: contain 100%幅を含むと、窓のサイズを変更し、イチゴのアスペクト比を維持できます。ただし、このアプローチの欠点は、画像のデスクトップバージョンに固定された高さを設定する必要があることです。または、それ以外の場合は、セット幅の割合に従います(レイアウトが変更されるとレイアウトが変更されます)。これらのカードをさまざまな量のテキストで生成する必要がある場合、テキストは包装され、物事が制限されすぎる可能性があります。

近日公開:アスペクト比

上記の問題の解決策は、今後のaspect-ratioプロパティを通じてまもなく実装される可能性があります。これにより、要素の固定スケールを設定することができます。たとえば、次のようになります。

 .el {
  アスペクト比:16 /9;
}

これは、固定された高さを排除し、計算したアスペクト比に置き換えることができることを意味します。たとえば、最後の例のデスクトップブレークポイントの寸法は次のようになります。

 。画像 {
  / * ... */
  高さ:184px;
  幅:318px;
}

aspect-ratioを使用して、高さ宣言を削除し、計算して最寄りの184スケールを取得できます。

 。画像 {
  / * ... */
  幅:318px; /*参照幅*/
  高さ:控えめ。 /*メディアクエリの外側の高さセットをリセット*/
  アスペクト比:159 /92; /*高さ184pxに近い*/
}

詳細を知りたい場合は、この記事の今後の属性を調べることができます。

最後に、可変スケールレイアウトで信頼できるレスポンシブ画像を実現する方法は複数あります。しかし、この作業を容易にするためのトリック - そしてより良い - は、必ずしもCSSにあるわけではありません。前景を背景から分離するか(私たちが行ったように)、またはエッジのかなりの部分がトリミングされていても機能する特定の画像を選択するかどうかにかかわらず、画像を調整するだけで簡単です。

以上が可変比率レイアウト内の流体画像の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
CSSグリッドとは何ですか?CSSグリッドとは何ですか?Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか?CSS Flexboxとは何ですか?Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか?CSSを使用してWebサイトを応答するにはどうすればよいですか?Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか?CSSボックスサイズのプロパティは何をしますか?Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

CSSを使用してアニメーション化するにはどうすればよいですか?CSSを使用してアニメーション化するにはどうすればよいですか?Apr 30, 2025 pm 03:17 PM

記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。

CSSを使用してプロジェクトに3D変換を追加できますか?CSSを使用してプロジェクトに3D変換を追加できますか?Apr 30, 2025 pm 03:16 PM

記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。

CSSに勾配を追加するにはどうすればよいですか?CSSに勾配を追加するにはどうすればよいですか?Apr 30, 2025 pm 03:15 PM

この記事では、CSSグラデーション(線形、放射状、繰り返し)を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。

CSSの擬似要素とは何ですか?CSSの擬似要素とは何ですか?Apr 30, 2025 pm 03:14 PM

記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール