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で見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …