アスペクト比を変えないで画像貼り付けこんな画像があるとする。これを正方形のエリアに特に何も考えずに貼り付ける(次)。縦横300pxのボックス要素に高さ・幅それぞれ100%指定で画像を貼り付けた。/>&lt/div>横長の画像を正方形に無理やり押し込めたので当然ながら横方向が潰れた(アスペクト比が狂った)変な画像になる。不自然すぎるのでワザとでなければ一番ダメな表示方法といえる。縦横300pxのボックス要素に幅AUTO・高さ100%指定で画像を貼り付けた。/>&lt/div>アスペクト比は正しいが横長の画像を正方形に収めると画像の上下(上の例では画像の下側)に無駄なエリアが出来るのと画像がとても小さく見えるので迫力がなくなる。高さは100%で画像の左右を切り取ってアスペクト比を崩さないようにすりゃいいじゃんってなるんだけど、以前はCSSだけでは結構面倒だった。今はかなり簡単になっているけど意外に使われていないかなというのがこの記事。お約束っちゃあお約束だがIEはここから下の全てが正常に表示されない。hidden;で溢れた部分を非表示化、高さ100%・幅AUTO指定で画像を貼り付けた。/>&lt/div>これだと元画像の左端しか表示されない筈。親要素側のoverflow:hiddenを外すと実際にはこうなっている。hidden;で溢れた部分を非表示化、高さ100%・幅AUTO指定で画像を貼り付けた。2を追加して画像の中央が表示されるようにする。/>&lt/div>親要素側のoverflow:hiddenを外すとこんな感じに切り抜いている。ここまでは以前からあった方法だけどちょっと面倒くさい。そこでCSS3で追加されたobject-fit。Edgeはここから下は全て正常に表示されない。画像を縦横300pxで表示。object-fit:coverを追加。/>自動的に画像の真ん中が表示されるのはありがたいが、逆に画像中の任意の位置を指定したいならobject-positionを追加する。画像の右端を表示してみた。/>ところで、object-fitがcover以外の値だとどうなるか。fillアスペクト比を変更して指定範囲に合わせて表示する。この記事2番めの画像(ダメな例)と同じ。contain指定範囲に画像全体が表示される。指定範囲に画像全体が入るまで拡大・縮小される。none画像を拡大縮小させないで指定範囲に表示させる。scale-downcontainかnoneのどちらか小さい方の要素が表示される。/>cssに馴染みがなくても使えるほど簡単で素晴らしいと思うのだが、例によって世紀の糞ブラウザ(IE,Edge)が対応していないのでそこだけ注意。いうか、そのせいで普及してないのだろうけど。スマホのブラウザでさえ表示できるものがPCのブラウザでできないってホントIE,Edgeは終わってるとしか言いようがない。コメントをキャンセルメールアドレスが公開されることはありません。