skillup

技術ブログ

デザイン

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

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

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

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

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

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

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

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

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

なるコードを発見。

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

に近いですね。

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

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

参考リンク

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

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

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

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …