アスペクト比の固定

レスポンシブで画面幅が変わってもいい感じのアスペクト比を出力するようにする。

メモ

• gridを使わない
• padding-topなど使わない
• heightを頑張って取得する

円

イメージ

$max-size: 300px; //基本的にデザインカンプのサイズ
$normal-size: calc(100vw / 3); //横に何個並ぶか(イメージだと3つ)
$min-size: 200px; // 最小サイズ、値はその時に応じて変更。
.className { //青色の部分
  width: $normal-size;
  height: $normal-size;
  min-width: $min-size;
  min-height: $min-size;
  max-width: $max-size;
  max-height: $max-size;
}

四角形

イメージ 緑色の部分の高さをアスペクト比固定にする。(205pxの部分)

$greenheight: 205; //緑色の高さ
$greenwidth: 244; //緑色の横幅
$column: 3; //カラム数
$mainwidth: 1440; //基準とする場所の横幅
$mainminwidth: 1280; //最小の横幅。とりあえず1280以下はheightを固定させたいので、、
.className { //緑色の部分
  max-width: #{$greenwidth}px;
  height: calc(#{$greenheight}px - (((#{$mainwidth}px - 100vw) / #{$column}) * (#{$greenheight} / #{$greenwidth})));
  min-height: calc(#{$greenheight}px - (((#{$mainwidth}px - #{$mainminwidth}px) / #{$column}) * (#{$greenheight} / #{$greenwidth})));
  max-height: #{$greenheight}px;
}

($greenheight / $greenwidth) で緑色の部分の縦横比を取得。 ($mainwidth - 100vw) / $column)は 1440pxの場合 : (1440 - 1440) / 3) = 0 1280pxの場合 : (1440 - 1280) / 3) = 53.3333333 のような感じでベースからの減っている値を取得。

緑の中に画像を入れたい場合

サイズが違う画像をいい感じに入れたいとき 赤色の部分が画像のイメージ

.className { //緑色
    //上のものの横幅・縦幅は省略。
    display: flex;
    align-items: center;
    justify-content: center;
    img  { //赤色
        max-width: 100%;
        max-height: 100%;
    }
}