決まった寸法の領域に、縦横比もサイズもバラバラの画像を「うまいこと」表示しないといけないなんてことないでしょうか。 HTML + CSSで地味に苦労する上下左右中央とサイズの調整、未だに一発書きが出来ません。 flexboxなどの新しいプロパティが使えるようになりましたが、Internet Explorerのことを考えるとなかなか手放しでは使えないのが現状です。 縦横どちらも規定より小さい画像は上下左右中央に原寸表示 縦横比が表示領域と異なり、規定よりもサイズが大きい画像は長辺を縮めて最大幅に合わせて縮小し、上下もしくは左右の中央に表示 画像をトリミングも引き伸ばしもせずに、原寸もしくはそれ以下で全部表示するということですね。 この2つを実現し、なおかつ画像を背景画像ではなくimg要素として記述するコーディングをご紹介します。 今回はInternet Explorer 10にも対応していま
