HTML&CSSこんにちは!ケインコスゲです。今回は「CSSのobject-fitを使って大きさが違う画像たちを正方形トリミング(レスポンシブ対応)して並べる方法」という内容でブログを書いてみたいと思いみます。Web制作をする時に、いくつかの画像を正方形で並べたい時ってありますよね。そんな時に便利なのがCSSのobject-fitというプロパティ。Exploler11に未対応のため、IE11まで対応させる場合はとある方法を使う必要があるのですが、そのあたりを加味しても、ちょこちょこobject-fitで画像トリミングを実装するケースも出てきているようです。そんなCSSのobject-fitですが、さすがにインターネット上で調べてみると関連した情報も増えてきているのですが、意外とまだないのが「object-fitを使ってレスポンシブ対応をさせる」方法です。まとめCSSのobject-fitを使って大きさが違う画像の正方形トリミング(レスポンシブ対応)を実装するための元となるコードまずは、CSSのobject-fitを使って大きさが違う画像の正方形トリミング(レスポンシブ対応)を実装する上で、今回取り扱う実例のコードを紹介したいと思います。上記のように、画像の縦横比率がバラバラのものを6枚(2行3列)並べたい、しかも正方形にトリミングした上で、レスポンシブ対応をさせたい、こんな時にどうCSSで実装すれば良いのかというのを紹介するのが今回のブログの本題だと思ってください!CSSのobject-fitを使って大きさが違う画像の正方形トリミング(レスポンシブ対応)を行うことができるサンプルコードそれでは、CSSのobject-fitを使って大きさが違う画像の正方形トリミング(レスポンシブ対応)を実装するためのサンプルコードを紹介したいと思います!今回は、ブラウザ幅が768px以下だった時に画像の縦横比率がバラバラのものを6枚(2行3列)正方形にトリミングした状態で並べたサンプルコードを紹介しています!ポイントとなるのが、画像の幅や高さをvwで設定しているという点です!CSSのvwとは、ブラウザ幅を基準とした時に、対象となるHTMLのプロパティ(指定したHTMLの文字サイズ・幅・高さなどですね)を何%の比率で表示したいか、という考え方で大きさを指定することができるCSSの単位です。%と似ていますが、%との違いとしては、%・・・親要素(親HTML)を基準とするvw・・・ブラウザの幅を基準とするというものがあります。vwの他にも「vh」といって、「ブラウザの高さを基準として対象となるHTMLのプロパティ(指定したHTMLの文字サイズ・幅・高さなどですね)を何%の比率で表示したいか」を指定することができるというCSSの単位もあります。違いについても理解しようこんにちは!ケインコスゲ(@keinkosuge)です。今回はレスポンシブイメージというものに関するブログを書いてみたいと思います。レスポンシブWe...記事を読むCSSがうまく効かない5つのパターンとは?原因の見つけ方や対処法も紹介HTMLやCSSの学習をしていると、「CSSが思った通りに効かない・・・」ということってよくありますよね。学びたてのときは、CSS...記事を読むCSSのprefers-reduced-motionについて。iPhoneで「視差効果を減らす」設定時には注意こんにちは!ケインコスゲです。CSSのprefers-reduced-motionに...記事を読むformの入れ子・複数使用・formタグが閉じられる現象に困ったら・・・form属性を知ろうこんにちは!ケインコスゲです。今回は、formタグに関するちょっとしたお話です。Mapsの埋め込みをWebサイトに設置したいとき、ありますよね。Displayに代表される高解像度モニタ...記事を読むCSSのtransitionとJavaScriptを使ってアコーディオンメニューを実装する時の注意点。heightの罠...こんにちは、ケインコスゲです。本日もニッチではあるのですが、CSSのtransitionとJavaScriptを使ってアコーディオン...記事を読むCSSのletter-spacingの罠!?中央揃えがずれる現象の対策方法についてこんにちは!ケインコスゲ(@keinkosuge)です。今回は、CSSのletter-spacingに関するお話です。バス&終電の情報まとめ。