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
Table of contents 1. Introduction to Nginx 2. Ima...
1. Packetdrill compilation and installation Sourc...
Table of contents 1. Introduction to jQuery 2. jQ...
1. Design source code Copy code The code is as fol...
This article example shares the specific code of ...
Previously, react.forwardRef could not be applied...
MySQL installation is divided into installation v...
1. Page requirements 1) Use standard headers and ...
When the carriage return character ( Ctrl+M ) mak...
This article example shares the specific code of ...
Table of contents Install Pagoda Management Pagod...
As the number of visits increases, for some time-...
After installing Redis on Linux, use Java to conn...
Linux virtual machine: VMware + Ubuntu 16.04.4 Wi...
MySQL version: MySQL Community Edition (GPL) ----...