CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック

ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ

[coliss]

サイズがバラバラな画像を美しく揃えて配置するCSSのテクニック。デザイン上の注意点も解説。

[spark7]

背景にしか効かなかったようなサイズ合わせが画像でもできるやつね 「object-fit」

[lilpacy]

サイズが違うアイコンやロゴのサイズ自動調整

[hinail]

"object-fit: contain;" /mix-blend-modeは現時点でIE未対応なので注意しとこ(https://caniuse.com/#search=mix-blend-mode)

[peketamin]

"1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 1rem; }"

[wumf0701]

cssブレンドモードとか初めて聞いたわ。すごいな。

[RATCHO]

max-系でやらなきゃだったのがobjet-fitで出来る、と。

[pachidouga]

css

[gla69]

地味にありがたい解説。

[fai_fx]

良き。