最近、独立したレイアウトで流体画像を処理するのは非常に簡単です。ただし、より複雑なインターフェイスの場合、このカードなどのレスポンシブ要素内に画像を配置する必要があることがよくあります。
この画像は、セマンチックなコンテンツであり、装飾にのみ使用されると仮定します。これは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 サイトの他の関連記事を参照してください。

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

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

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

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

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

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

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

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

ホットトピック



