css實現保持div的等寬高比

這篇文章主要為回答這個問題：“做響應式網頁，如何讓一個div的高和寬保持比例放大或是縮小？”，這里不介紹媒體查詢的實現。

 

那么css如何實現高度height隨寬度width變化保持比例不變呢？即給定可變寬度的元素，它將確保其高度以響應的方式保持成比例(即，其寬度與高度的比率保持恆定)。

下面以高寬 2:1 為例，通過2種方式來實現這種效果。

 

方式一：利用定位實現

.wrapper{
  position : relative;
  background: #ccc;
  width: 10%;
  padding-bottom : 20%;
}
.inner{
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<div class="wrapper">
	<div class="inner">
		這是內容
	</div>
</div>

　　

說明：其中奧妙就在於padding-bottom:20%, padding-bottom 是相對寬度的.也就是整個Wrapper的高度等於padding-bottom 的高度,Wrapper 沒有內容高度.沒有內容高度如何往其中放置我們准備的div呢?答案是 絕對定位, 所以Wrapper的樣式中有position:relative, 方便子元素相對Wrapper的左頂點定位.

新片場https://www.wode007.com/sites/73286.html 傲視網https://www.wode007.com/sites/73285.html

方式二：利用偽元素

<style>
.wrapper {
  background: #ccc;
  width: 10%;
}
.wrapper::before {
  content: '';
  padding-top: 200%;
  float: left;
}
.wrapper::after {
  content: '';
  display: block;
  clear: both;
}
</style>
<div class="wrapper">
	這是內容
</div>

　　

該方法來自：30 Seconds of css。

padding-top 在...上::before 偽元素使元素的高度等於其寬度的百分比。200% 因此表示元素的高度始終為200% 的寬度，創建一個響應正方形。 此方法還允許內容正常放置在元素內部。

 

總結：

二種方式實現的效果都一樣，大家可以試一下，調整瀏覽器窗口的大小以查看元素的比例保持不變。

個人推薦使用方法二，這樣可以減少div的嵌套。不過方法一的兼容更好