CSSは高さと幅を固定した要素の比例表示効果を実現します

padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の要件は、ビデオの div ボックスの高さが固定されていることです。幅を比例して表示するにはどうすればよいでしょうか。

解決後の効果は図のようになります。

赤いボックスは、上記の固定高さ比の範囲内での幅の調整の効果を示しています。

CSSコード:

。コンテンツ {
      マージン: 0 自動;
      高さ：79vh;
      .ビデオボックス{
        位置: 相対的;
        高さ: 100%;
        オーバーフロー: 非表示;
        マージン: 0 自動;
        幅: 79vh*1.778;
        最大幅: 100vw;
        .ad_pic {
          表示: なし;
          位置: 絶対;
          上: 0;
          左: 0;
          幅: 100%;
          高さ: 100%;
          背景: url(6.jpg) 繰り返しなし 中央;
          背景サイズ: 100% 100%;
          画像 {
            幅: 100%;
            高さ: 100%;
          }
          .btn_play {
            表示: インラインブロック;
            .幅(50);
            .高さ(50);
            位置: 絶対;
            左: 50%;
            上位: 50%;
            .左マージン(-25);
            .マージントップ(-25);
            背景: url(../../public/img/icon_play.png) 繰り返しなし 中央;
            背景サイズ: 100% 100%;
          }
        }
        iframe、オブジェクト、埋め込み、ビデオ {
          位置: 絶対;
          上: 0;
          左: 0;
          幅: 100%;
          高さ: 100%;
        }
        .ビデオカード{
          位置: 絶対;
          上: 0;
          左: 0;
          幅: 2px;
          高さ: 1px;
        }
      }
    }

html:

<div class="content">
        <div class="video_box">
            <div class="ad_pic">
                <span class="btn_play"></span>
            </div>
            <ビデオ id="ad_video"
                   自動バッファ
                   src="a.mp4"
                   自動再生
                   プリロード
                   コントロール=""
                   ループ
                   ポスター="6.jpg"
                   webkit-playsinline="true"
                   playsinline="true"
                   x-webkit-airplay="許可"
                   x5-プレイインライン
                   x5-ビデオプレーヤータイプ="h5"
                   x5-ビデオプレーヤーフルスクリーン="true"
                   x5-ビデオの向き="縦"
                   >
            </ビデオ>
        </div>
    </div>

ビデオにはアスペクト比があるため、ここでのビデオの高さは、外側のボックスの高さ * 比率、つまりビデオの幅に等しくなります。ビデオが幅広すぎて画面を超えないようにするには、ここで max-width: 100vw; 制限を追加し、margin:0 auto; を使用して中央に配置します。これで問題は解決しました。

要約する

上記は、固定の高さと比例幅の表示効果を持つ要素を実現するために紹介した CSS です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: 今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します

>>: Docker のインストールと構成コマンドのコード例