css如何保持div等高寬比

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

創(chuàng)新互聯(lián)公司專注于文峰企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站開(kāi)發(fā)。文峰網(wǎng)站建設(shè)公司,為文峰等地區(qū)提供建站服務(wù)。全流程定制開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

下面以高寬 2:1 為例，通過(guò)2種方式來(lái)實(shí)現(xiàn)這種效果。

方式一：利用定位實(shí)現(xiàn)

.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">
        這是內(nèi)容
    </div>
</div>

說(shuō)明：其中奧妙就在于padding-bottom:20%, padding-bottom 是相對(duì)寬度的.也就是整個(gè)Wrapper的高度等于padding-bottom 的高度,Wrapper 沒(méi)有內(nèi)容高度.沒(méi)有內(nèi)容高度如何往其中放置我們準(zhǔn)備的DIV呢?答案是 絕對(duì)定位, 所以Wrapper的樣式中有position:relative, 方便子元素相對(duì)Wrapper的左頂點(diǎn)定位.

方式二：利用偽元素

<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">
    這是內(nèi)容
</div>

padding-top 在...上::before 偽元素使元素的高度等于其寬度的百分比。200% 因此表示元素的高度始終為200% 的寬度，創(chuàng)建一個(gè)響應(yīng)正方形。 此方法還允許內(nèi)容正常放置在元素內(nèi)部。

總結(jié)

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

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

這里推薦一下我的前端技術(shù)分享群：731771211，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁(yè)，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，有想學(xué)習(xí)web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習(xí)的小伙伴歡迎加入學(xué)習(xí)。

點(diǎn)擊： 加入

本文題目：css如何保持div等高寬比
分享網(wǎng)址：http://muchs.cn/article16/jpgcgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、域名注冊(cè)、企業(yè)網(wǎng)站制作、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)