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
Responsive design is to perform corresponding ope...
Preface: The "Getting Started with MySQL&quo...
Pre-installation preparation The main purpose of ...
Table of contents Preparation Install VMware Work...
Table of contents Preface Confusing undefined and...
Overview This article will introduce the MVC arch...
1. INSERT INTO SELECT statement The statement for...
When learning mybatis, I encountered an error, th...
When writing a web project, I encountered an intr...
Table of contents Mixin Mixin Note (duplicate nam...
mysql storage engine: The MySQL server adopts a m...
The table structure is as follows: id varchar(32)...
Preface Today I installed MySQL and found that th...
Table of contents Overview 1. Download via URL 2....
Install Docker Update the yum package to the late...