aspect-ratioの使い方

基本的な使い方

.element {
  aspect-ratio: 16 / 9; /* 横:縦 の比率 */
}



主な使用場所


1. 画像・動画のプレースホルダー

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* YouTube動画など */
}

.thumbnail {
  width: 300px;
  aspect-ratio: 4 / 3; /* サムネイル画像 */
}



2  レスポンシブな正方形・長方形

.square-box {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形 */
}

.card-image {
  width: 100%;
  aspect-ratio: 3 / 2; /* カード画像 */
}


3  グリッドレイアウト

.grid-item {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

注意点

/* ❌ heightと併用すると競合する */
.bad {
  aspect-ratio: 16 / 9;
  height: 500px; /* どちらが優先される? */
}

/* ✅ widthだけ指定 */
.good {
  width: 100%;
  aspect-ratio: 16 / 9; /* 高さが自動計算 */
}

/* ✅ 最大値を制限したい場合 */
.better {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
}



解決方法

@media screen and (max-width: 768px) {
  .element {
    aspect-ratio: unset; /* または auto */
    height: auto; /* 自然な高さに */
  }
}

*コチラは幾つかのMVを実装していて、フェードインで切り替わる手法です

<div class="mv_top_content">
            <ul>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv1.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv1_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv1.png" alt="MV画像1" class="mv_image" />
                </picture>
              </li>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv2.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv2_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv2.png" alt="MV画像2" class="mv_image" />
                </picture>
              </li>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv3.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv3_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv3.png" alt="MV画像3" class="mv_image" />
                </picture>
              </li>
              <li>
                <picture>
                  <!-- 幅が768px以上の場合に表示する画像 -->
                  <source srcset="img/mv4.png" media="(min-width: 769px)" />
                  <!-- 幅が768px未満の場合に表示する画像 -->
                  <source srcset="img/mv4_tab.png" media="(max-width: 768px)" />
                  <!-- フォールバック用の画像 -->
                  <img src="img/mv4.png" alt="MV画像4" class="mv_image" />
                </picture>
              </li>
            </ul>
          </div>

＊コチラはマスクを使用して画像を変形させております。マスクのやり方はまた別途記事にて

/*---------------mv-topコンテンツの基本設定---------------*/
.mv_top_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden; /* 横スクロールを明示的に防止 */
  -webkit-mask-image: url("../img/mask.png");
  -webkit-mask-size: 100% 100%;
  mask-image: url("../img/mask.png");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center center;
}

.mv_top_content ul {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
}

.mv_top_content ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent);
  z-index: 2; /* 画像の上に配置 */
  pointer-events: none; /* クリックイベントを通過させる */
}

@media screen and (max-width: 768px) {
  .mv_top_content {
    -webkit-mask-image: url("../img/mask_sp.png");
    mask-image: url("../img/mask_sp.png");
    mask-position: unset;
  }
  .mv_top_content ul {
    height: 100vh !important; /* スマホ用に高さを調整 */
    aspect-ratio: unset !important; /* 768px以下ではaspect-ratioを解除 */
  }
  @media screen and (max-width: 500px) {
    .mv_top_content ul {
      height: min(150vw, 750px) !important;
    }
  }
  .mv_top_content ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent);
    z-index: 2; /* 画像の上に配置 */
    pointer-events: none; /* クリックイベントを通過させる */
  }
}

.mv_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1; /* グラデーションより下に配置 */
}

.mv_image.active {
  opacity: 1;
}