亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

純css實(shí)現(xiàn)容器高度隨寬度等比例變化的四種解決方案

vslam / 4235人閱讀

摘要：除了增加了一個(gè)結(jié)構(gòu)，但是相對與一個(gè)頁面成百上千的代碼來說，不值一提我們知道，容器如果不給定高度，它的高度會(huì)隨著容器內(nèi)部的元素變化而撐大，這個(gè)時(shí)候，我們在容器內(nèi)部添加一張符合我們寬高比例的圖片，給圖片設(shè)置寬度高度。

使用一個(gè)隱藏的圖片來實(shí)現(xiàn)

這個(gè)方法是我最推薦的，因?yàn)椴恍枰紤]任何兼容性，PC移動(dòng)完美運(yùn)行。除了增加了一個(gè)dom結(jié)構(gòu)，但是相對與一個(gè)頁面成百上千的代碼來說，不值一提

我們知道，div容器如果不給定高度，它的高度會(huì)隨著容器內(nèi)部的元素變化而撐大，這個(gè)時(shí)候，我們在容器內(nèi)部添加一張符合我們寬高比例的圖片，給圖片設(shè)置寬度100%；高度auto。不管我們的父容器如何變化，內(nèi)部的img寬度都是100%，圖片是會(huì)嚴(yán)格按照比例i自動(dòng)縮放的，相應(yīng)的，我們內(nèi)部的子容器的蓋度也就會(huì)按照比例縮放了

  #container {
    width: 100%;
  }
  .attr {
    background-color: #008b57;
  }
  .attr img{
    width: 100%;
    height: auto;
  }

如果你覺得增加img標(biāo)簽多發(fā)了http請求，那么請繼續(xù)往下看，神器base64圖片編碼幫你解決這個(gè)問題，由于我們的的圖片只需要一個(gè)人形狀而已，所以可以大膽的壓縮，然后編碼，連http請求都省了，嘎嘎~
使用vmin

這個(gè)單位也是css3的新單位(css3大法好~)，我們將父容器的寬度和高度定義為相同的vmin，這樣父容器的高度和寬度就是相同值，這個(gè)時(shí)候，子容器的寬高值設(shè)為百分比，不管父容器大小如何變，子容器的高度和寬度比都是不會(huì)變的。

單位 說明
vw 相對于視窗的寬度
vh 相對于視窗的高度
vmin 相對于視口的寬度或高度中較小的那個(gè)被均分為100單位的vmin
vmax 相對于視口的寬度或高度中較大的那個(gè)被均分為100單位的vmax

  #container{
  width: 100vmin;
  height: 100vmin;
  }

.attr {
  width: 50%;
  height: 50%;
  background-color: orange;
}
使用cale

cale()是css3的心特性，它的值可以是一個(gè)表達(dá)式，這里我們關(guān)心的是。calc中的百分比也是按照父容器的百分比垃圾算的

.attr{
  width:50%;
  height: calc(50%);
}
padding-bottom實(shí)現(xiàn)

這里方法非常巧妙，由于padding-bottom的屬性值百分比是按照父容器的寬度來計(jì)算的，所以這里我們設(shè)置容器寬度為父容器的50%；padding-bottom也為50%；就都是父容器寬度的50%；顯示出來就是一個(gè)完美的正方形了

看個(gè)代碼：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111455.html

相關(guān)文章

  • 元素auto寬高的影響因素

    摘要：關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級(jí)元素，而沒有考慮到內(nèi)聯(lián)元素的情況。但巧合的是，在普通流定位中，內(nèi)聯(lián)元素寬度和高度規(guī)則卻和塊級(jí)元素絕對定位差不多，都只受內(nèi)容大小影響。 我們知道，元素在沒有設(shè)置寬高的情況下，默認(rèn)的寬高值都為auto。而這個(gè)auto到底是如何讓元素自動(dòng)擁有寬高的呢，也就是說，元素的寬度和高度到底會(huì)受到什么因素的影響？本文將通過一個(gè)例子來對這一問題一探究竟，HTML結(jié)構(gòu)和初始c...

    crelaber 評(píng)論0 收藏0

  • 【復(fù)習(xí)】CSS實(shí)現(xiàn)寬高等比自適應(yīng)容器

    摘要：于是我們就需要實(shí)現(xiàn)一個(gè)寬度自適應(yīng)，高度為寬度一半的容器。一思考如何實(shí)現(xiàn)這個(gè)問題類似于我們在移動(dòng)端頁面，上面有一張寬度的圖片，如果我們沒設(shè)置高度，則圖片會(huì)根據(jù)原有尺寸，等比縮放。我們就可以利用這個(gè)特性，實(shí)現(xiàn)移動(dòng)端的寬高等比自適應(yīng)容器。 在最近開發(fā)移動(dòng)端頁面，遇到這么一個(gè)情況：當(dāng)頁面寬度 100% 時(shí)，高度為寬度一半，并隨手機(jī)寬度變化依然是一半。 于是我們就需要實(shí)現(xiàn)一個(gè)寬度自適應(yīng)，高度為寬...

    habren 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)1-九宮格

    摘要：用于顯示日志信息及輸入一些命令請求監(jiān)聽?？色@得請求列表，點(diǎn)開某一項(xiàng)將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請求的請求方法狀態(tài)碼請求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶代理，幫服務(wù)器識(shí)別設(shè)備用預(yù)覽。 九宮格——用html+css制作一個(gè)網(wǎng)頁 一. 目標(biāo)效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圓角...

    Tecode 評(píng)論0 收藏0

  • 頁面設(shè)計(jì)相關(guān)鏈接收集

    摘要：瀏覽器版本國內(nèi)電腦端瀏覽器版本統(tǒng)計(jì)年月年月屏幕分辨率上的分辨率統(tǒng)計(jì)網(wǎng)頁設(shè)計(jì)中常見的寬高比常見顯示設(shè)備的媒體查詢標(biāo)準(zhǔn)百度統(tǒng)計(jì)的中國網(wǎng)民分辨率使用情況兼容性設(shè)置僅用于的樣式設(shè)置渲染模式設(shè)置及渲染模式樣式兼容性清單開發(fā)者指南的媒體查詢實(shí)現(xiàn)方案專 瀏覽器版本 StatCounter國內(nèi)電腦端瀏覽器版本統(tǒng)計(jì)（15年8月~16年8月）； 屏幕分辨率 W3Schools上的分辨率統(tǒng)計(jì)； 網(wǎng)頁設(shè)計(jì)中...

    sean 評(píng)論0 收藏0

  • 頁面設(shè)計(jì)相關(guān)鏈接收集

    摘要：瀏覽器版本國內(nèi)電腦端瀏覽器版本統(tǒng)計(jì)年月年月屏幕分辨率上的分辨率統(tǒng)計(jì)網(wǎng)頁設(shè)計(jì)中常見的寬高比常見顯示設(shè)備的媒體查詢標(biāo)準(zhǔn)百度統(tǒng)計(jì)的中國網(wǎng)民分辨率使用情況兼容性設(shè)置僅用于的樣式設(shè)置渲染模式設(shè)置及渲染模式樣式兼容性清單開發(fā)者指南的媒體查詢實(shí)現(xiàn)方案專 瀏覽器版本 StatCounter國內(nèi)電腦端瀏覽器版本統(tǒng)計(jì)（15年8月~16年8月）； 屏幕分辨率 W3Schools上的分辨率統(tǒng)計(jì)； 網(wǎng)頁設(shè)計(jì)中...

    supernavy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<