CSS achieves a proportional display effect of an element with fixed height and width

CSS achieves a proportional display effect of an element with fixed height and width

Using padding-top percentage can achieve a fixed width and proportional height display. The current requirement is that the height of the div box of a video is fixed, how can the width be displayed proportionally?

The effect after the solution is as shown in the figure:

The red box shows the effect of width adaptation within the fixed height ratio range above.

CSS code:

.content {
      margin: 0 auto;
      height: 79vh;
      .video_box {
        position: relative;
        height: 100%;
        overflow: hidden;
        margin: 0 auto;
        width: 79vh*1.778;
        max-width: 100vw;
        .ad_pic {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url(6.jpg) no-repeat center;
          background-size: 100% 100%;
          img {
            width: 100%;
            height: 100%;
          }
          .btn_play {
            display: inline-block;
            .width(50);
            .height(50);
            position: absolute;
            left: 50%;
            top: 50%;
            .margin-left(-25);
            .margin-top(-25);
            background: url(../../public/img/icon_play.png) no-repeat center;
            background-size: 100% 100%;
          }
        }
        iframe, object, embed, video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        .video_card {
          position: absolute;
          top: 0;
          left: 0;
          width: 2px;
          height: 1px;
        }
      }
    }

html:

<div class="content">
        <div class="video_box">
            <div class="ad_pic">
                <span class="btn_play"></span>
            </div>
            <video id="ad_video"
                   autobuffer
                   src="a.mp4"
                   autoplay
                   preload
                   controls=""
                   loop
                   poster="6.jpg"
                   webkit-playsinline="true"
                   playsinline="true"
                   x-webkit-airplay="allow"
                   x5-playsinline
                   x5-video-player-type="h5"
                   x5-video-player-fullscreen="true"
                   x5-video-orientation="portrait"
                   >
            </video>
        </div>
    </div>

Since the video has an aspect ratio, the height of the video here is directly the height of the outer box * the ratio, which is equal to the width of the video. In order to prevent the video from being too wide and exceeding the screen, add a max-width: 100vw; limit here, and then use margin:0 auto; to center it. The problem is solved successfully!

Summarize

The above is the CSS that I introduced to you to achieve an element with a fixed height and proportional width display effect. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Today I will share some rare but useful JS techniques

>>:  Docker installation and configuration command code examples

Recommend

What you need to know about responsive design

Responsive design is to perform corresponding ope...

Detailed explanation of long transaction examples in MySQL

Preface: The "Getting Started with MySQL&quo...

Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)

Pre-installation preparation The main purpose of ...

Several mistakes that JavaScript beginners often make

Table of contents Preface Confusing undefined and...

Detailed explanation of CocosCreator MVC architecture

Overview This article will introduce the MVC arch...

About the configuration problem of MyBatis connecting to MySql8.0 version

When learning mybatis, I encountered an error, th...

HTML page native VIDEO tag hides the download button function

When writing a web project, I encountered an intr...

Web project development VUE mixing and inheritance principle

Table of contents Mixin Mixin Note (duplicate nam...

How to modify the default storage engine in MySQL

mysql storage engine: The MySQL server adopts a m...

Two query methods when the MySQL query field type is json

The table structure is as follows: id varchar(32)...

Move MySQL database to another disk under Windows

Preface Today I installed MySQL and found that th...

How to download excel stream files and set download file name in vue

Table of contents Overview 1. Download via URL 2....

Super simple implementation of Docker to build a personal blog system

Install Docker Update the yum package to the late...