今度こそ画像のアスペクト比を4:3に指定してCSSで内接リサイズしました

画像のアスペクト比を4:3に指定してCSSで内接リサイズしました - ncaq

で行っていた内接リサイズは,画像が縦長の状態を全く考慮していませんでした.

縦長のはそのままになってしまいました…

そこでもう諦めてwidthはpx指定してheightheight: calc(200px * (3 / 4));したのですが,この場合モバイル環境で縦いっぱいに表示されないんですね.

CSSでcalcを使って処理できないかなあと思いましたが無理っぽいですね.CSS Variablesを使えば処理できるかなあと思ったのですが実装が…普及してないだろうなあと思ってCan I useを見てみたらIE以外はサポートしていました.使えるじゃん.でもCSS Variablesを使っても解決出来なさそうですね…

結局画像でもCSSだけでアスペクト比を固定するテク - Qiitaを参考にするのが必要でした.

画像だからこういうテクニックは要らないと思っていたのが間違いでした.

つまり以下のようにします.

.thumbnail-wrapper {
    position: relative;
    width: 100%;
}

.thumbnail-wrapper:before {
    content: "";
    display: block;
    padding-top: 75%;
}

.thumbnail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 100%;
    object-fit: contain;
}

もっとシンプルに出来る良い方法を知っている方が居れば教えていただきたいです.

このエントリーをはてなブックマークに追加 fb-like g-plusone pocket