skillup

技術ブログ

デザイン

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

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

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

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

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

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

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

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

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

なるコードを発見。

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

に近いですね。

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

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

参考リンク

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

スマホサイト対策全般

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

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …