【CSS】縦横比固定のトリミングされたサムネイルをつくる「内接・外接リサイズ」｜（株）くふうしずおか

今回は、CSSでサムネイル画像を描画する方法を、メモも兼ねていくつか紹介します。 段階を追って、divなどのブロック要素で縦横比率を守ったボックスを作る方法と、imgタグを使用した場合、ieに対応した場合、background-imgを使用した場合に、それぞれ内接リサイズ・外接リサイズで表示する方法をまとめました。 内接リサイズ：画像全体が枠内に収まるようにリサイズする。画像の長辺に合わせた方法 外接リサイズ：枠からはみ出す部分はカットする。画像の短辺を枠に合わせた方法 ①divの縦横比を固定してレスポンシブにする方法サムネイルではレスポンシブ対応するために、CSSだけでアスペクト比を固定したい、という場合が多いと思います。 CSSのみで任意の縦横比のボックスを作成し、divやiframeのアスペクト比を固定することでレスポンシブなデザインの場合でも正方形を保つ方法があります。 1:1の正

[sugarte]

imgタグで object-fitもどきができるスタイル