• 作成: 2017年11月20日(月)15時43分04秒

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

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

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

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

そこでもう諦めてwidthはpx指定してheightはheight: 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;
}

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