skillup

技術ブログ

デザイン

object-fitによる画像比率を保ったセンタリング

投稿日:2019年7月20日 更新日:

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。

と言うのも可変要素であり、幅を制御するのが難しかったりします。

参考リンク
メインで使う画像のcssについて

まあ縦長とか横長とか決まっていればwidth:n%などとしておけばいいのですが、縦長、横長の両方がきた場合のセンタリングは少々めんどかったりします。

一応、どんな要素がきても必ず中央になるCSSは下記のような書き方でしょうか?

これであれば基本縦横比を保ったまま、boxの中央になります。margin:0 autoが使えないこともあるようなので、上記のようなやや手の込んだセンタリングが必要にないります。

が、フロントのスキルのある方のコードを見たところ、

なるコードを発見。

画像の比率に応じて自動的に幅に収まるように(小さい方の最大幅を自動的にとる)プロパティのようです。

に近いですね。

background同様、大きいサイズに合わせるプロパティの

もありました。合わせて使っていきたいですね。

参考リンク

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-5 …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …