如何用css實現元素固定寬高比？

一、img、video 可替換元素的固定寬高比實現原理

指定img、video的寬度或者高度，另一邊設定auto自動計算。比較簡單。

css：

width: 50%;

}img

二、普通元素固定寬高比實現原理：

利用padding-top或者padding-bottom的百分比值，實現容器長寬比。在css中padding-top或padding-bottom的百分比值是根據容器的width來計算的。如此一來就很好的實現了容器的長寬比。採用這種方法，需要把容器的height設定為0。而容器內容的所有元素都需要採用position:absolute，不然子元素內容都將被padding擠出容器（造成內容溢位）。

比如我們容器的長寬比是16:9，那麼根據計算：100% * 9 / 16 可以得到 56.25%。如果你希望的是4:3，那麼對應的就是100% * 3 / 4。也可以使用calc函式來實現自動計算：calc(100%*9/16)。

不過這種方式不靈活，只能夠高度隨著寬度變。css 工作組現在正在引入一種新的方案aspect-ratio，可以很方便地指定寬高比，不過暫時還沒有瀏覽器實現。相信不久之後就會有瀏覽器逐漸實現了。

這是乙個16：9的矩形

* 

.box 
.scale 
.item

但是這種方式下，想要不變形，需要設定cover屬性哦，但是這樣同時有個缺陷，就是，不能顯示完整。background: url() no-repeat center center/cover;

css：

* 

.box 
width: 100%;
background: url() no-repeat center center/cover;
padding-bottom: 56.25%;
height: 0;
}img

不定寬度元素排版及子元素固定寬高比問題

什麼情況需要做自適應呢?最常見的情況就是父元素的寬度不固定造成子元素排版改變。我們根據不同的情況，做不同的適應。父級元素寬度改變時，子元素大小也隨著改變，子元素的寬高參照同一標準計算的單位，例如vw以可視頁面寬度計算，rem以html的font size計算等，效果如下 父級元素寬度改變，子元素的大...

Android中如何使控制項保持固定寬高比

如何實現固定的寬高比，現在提供兩種方案。自定義ratioview，重寫onmeasure或onlayout等相關方法，通過預定的比例計算寬高。public class ratioview extends view public ratioview context context,nullable a...

CSS 如何讓元素尺寸縮小時保持寬高比例一致？

一般情況下，元素的高度與寬度不成比例關係，但是css中有乙個屬性即padding對元素寬度存在依存關係。如果乙個元素的padding屬性以百分比形式表示，如 div 那麼div最終的padding值為 所以，如果想保持乙個元素寬高比例始終一致，可以為這個元素的 before偽類設定padding，讓...