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
Nginx load balancing server: IP: 192.168.0.4 (Ngi...
Table of contents summary Environment and tool pr...
Today I would like to share with you the CSS3 tra...
Case 1 vue-cli builds the vue3 project, uploads t...
Today, I encountered a little problem when I was ...
The <a> tag is mainly used to define links ...
<br />Related articles: How to prompt and op...
Table of contents Overview Index data structure B...
1. CSS Miscellaneous Icons There are three ways t...
Table of contents 1. Optional Chaining 2. Null va...
The default storage directory of mysql is /var/li...
The first solution is to push the image to a publ...
Map tags must appear in pairs, i.e. <map> .....
Recently, an error occurred while starting MySQL....
There is such a requirement: an import button, cl...