用padding-top百分比可以實現寬度固定高度按比例展示,現在的需求是對乙個video**的盒子div高度是固定的,寬度如何按比例展示?
解決後效果如圖:
紅框標註的即是我在上面高度比例固定的範圍內寬度自適應的效果;
css**:
.content
.btn_play
}iframe, object, embed, video
.video_card }}
html:
rbinsggunline="true"
playsinline="true"
x-webkit-airplay="allow"
www.cppcns.com x5-playsinline
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
>
由於**是有寬高比的,這裡給**的高度直接是外面盒子的高度*比例,就等於**的寬,為了防止**過寬超出屏www.cppcns.com幕,這裡加乙個max-width:100vw;限制一下,然後通過margin:0 auto;居中顯示,成功解決!
總結本文標題: css實現乙個元素高度固定寬度按比例顯示效果
本文位址: /web/css/208936.html
css中如何固定元素的寬度和高度
直接開門見山啦,請看下面 與效果 one two style head class one 固定高寬值div class two 高寬值加上了padding border值,不包括margindiv body box sizing content box 預設值 border box 1.conte...
jQuery獲取頁面及個元素高度 寬度
獲取瀏覽器顯示區域 可視區域 的高度 w indo w h eigh t 獲取瀏覽 器顯示區 域 可視 區域 的 寬度 wi ndow he ight 獲 取瀏覽器 顯示區域 可視區 域 的寬 度 window width 獲取頁面的文件高度 d ocum ent hei ght 獲取 頁面的文 檔...
jQuery獲取頁面及個元素高度 寬度
獲取瀏覽器顯示區域 可視區域 的高度 window height 獲取瀏覽器顯示區域 可視區域 的寬度 window width 獲取頁面的文件高度 document height 獲取頁面的文件寬度 document width 瀏覽器當前視窗文件body的高度 document.body hei...