css實現乙個元素高度固定寬度按比例顯示效果

2022-09-20 13:09:13 字數 709 閱讀 8991

用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...