在CSS中,我們可以使用百分比(%)來定義高度和寬度,如果我們想要讓高度等于寬度的一半,我們可以將高度設(shè)置為50%,寬度設(shè)置為100%。
假設(shè)我們有一個(gè)div元素,我們可以這樣寫CSS:
div { width: 100%; height: 50%; }
這樣,div的高度就會(huì)是寬度的一半,注意,這種方法只在父元素有確定的高度或?qū)挾葧r(shí)有效,如果父元素的高度或?qū)挾炔淮_定,那么這種方法可能無法正常工作。
我們還可以使用視口單位(vw、vh)來定義高度和寬度,這種方法與百分比類似,但它是基于視口(即瀏覽器窗口)的寬度和高度來計(jì)算的,我們可以將高度設(shè)置為25vh,寬度設(shè)置為50vw:
div { width: 50vw; height: 25vh; }
這樣,div的高度就會(huì)是寬度的一半,無論瀏覽器窗口的大小如何變化,這種方法可以確保元素的大小在各種設(shè)備上都能保持一致。