検索

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

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

この画像は、セマンチックなコンテンツであり、装飾にのみ使用されると仮定します。これは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 までご連絡ください。
スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティススクリーンリーダーの分解:アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

WordPressブロックと要素にボックスシャドウを追加しますWordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

GraphQLキャッシングの使用GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

上品でクールなカスタムCSSスクロールバー:ショーケース上品でクールなカスタムCSSスクロールバー:ショーケースMar 10, 2025 am 11:37 AM

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

ショー、Don' t Tellショー、Don' t TellMar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

Redwood.jsと動物相を使用してイーサリアムアプリを構築しますRedwood.jsと動物相を使用してイーサリアムアプリを構築しますMar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

NPMコマンドは何ですか?NPMコマンドは何ですか?Mar 15, 2025 am 11:36 AM

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール