成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css 不規(guī)整元素的寬高等比例

laoLiueizo / 2757人閱讀

摘要：不規(guī)整元素的寬高等比例在不同屏幕情況中不同寬高的元素都以相同等比例等寬和等高方式展示。規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。

不規(guī)整元素的寬高等比例

在不同屏幕情況中不同寬高的元素都以相同等比例、等寬和等高方式展示。

需求

設(shè)計師希望頁面的圖片區(qū)域，以寬高為2:1比例且所有圖片的等寬和等高的方式展示。小加同學(xué)覺得設(shè)計師這需求太容易，分分鐘搞定，拿到圖片后便開始刷刷的擼代碼。原型設(shè)計稿大致如下:

bootstrap 柵格系統(tǒng) 思路

每個圖片區(qū)域?qū)挾葹楦冈貙挾鹊?5%，圖片的寬度設(shè)置100%，其高度根據(jù)寬度等比例自動縮放（小加以為圖片的寬高應(yīng)該是同比例的），這樣就可以適應(yīng)屏幕達(dá)到要求咯～

HTML 
  

    
初版
CSS 
  .section {
      margin-bottom: 100px;
    }
  .section__image-wrap {
    display: inline-block;
    float: left;
    padding: 10px;
  }
  .section__image {
    width: 100%;
  }
效果圖

吐槽

OMG，這這這...是什么情況啊～ 一行四個，怎么第二行就一個，前面三個位置都是空的，這不可能啊！等等，我需要靜靜～ 貌似圖片不是同比例的寬高的，**這讓我怎么搞，手動設(shè)置圖片高度為50%？實時計算高度然后動態(tài)設(shè)置圖片高度？



分割線來咯～ 你能夠嘗試著解決這個問題嗎？



padding + position 思路

使用padding百分比的方式來實現(xiàn)不規(guī)整元素寬高等比例。padding-left/right設(shè)置百分比時，是參考父元素的寬度；想當(dāng)然的padding-top/bottom設(shè)置百分比時，是參考父元素的高度，Oh no no no... 它也是參考父元素的寬度哦。

CSS 
  .section {
    margin-bottom: 100px;
  }
  .section__image-wrap {
    display: inline-block;
    float: left;
    padding: 10px;
  }
  .section__image {
    width: 100%;
  }
  .section-revision--padding .section__image-wrap {
    position: relative;
    padding: 12.5% 0 0 25%;
  }
  .section-revision--padding .section__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 10px;
  }
效果圖

效果對比圖

關(guān)鍵知識點 



padding value
description





auto
瀏覽器計算內(nèi)邊距。




length
規(guī)定以具體單位計的內(nèi)邊距值，比如像素、厘米等。默認(rèn)值是0px。




%
規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。




inherit
規(guī)定應(yīng)該從父元素繼承內(nèi)邊距。






w3school
資源 在線測試 源代碼

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115256.html

相關(guān)文章

  • css 不規(guī)整元素的寬高等比例

    摘要：不規(guī)整元素的寬高等比例在不同屏幕情況中不同寬高的元素都以相同等比例等寬和等高方式展示。規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。 不規(guī)整元素的寬高等比例 在不同屏幕情況中不同寬高的元素都以相同等比例、等寬和等高方式展示。 需求 設(shè)計師希望頁面的圖片區(qū)域，以寬高為2:1比例且所有圖片的等寬和等高的方式展示。小加同學(xué)覺得設(shè)計師這需求太容易，分分鐘搞定，拿到圖片后便開始刷刷的擼代碼。原型設(shè)計稿大...

    ckllj 評論0 收藏0

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

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

    habren 評論0 收藏0

  • css 多列等高

    摘要：多列等高高度不一的列以等高方式布局。需求設(shè)計師說某頁面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺上保持一致。 多列等高 高度不一的列以等高方式布局。 需求 設(shè)計師說某頁面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺上保持一致。小加同學(xué)覺得必須迅速解決，讓設(shè)計師妹妹知道我們程序師哥哥的威武。原型設(shè)計稿大致如下:showImg(ht...

    sarva 評論0 收藏0

  • css 多列等高

    摘要：多列等高高度不一的列以等高方式布局。需求設(shè)計師說某頁面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺上保持一致。 多列等高 高度不一的列以等高方式布局。 需求 設(shè)計師說某頁面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺上保持一致。小加同學(xué)覺得必須迅速解決，讓設(shè)計師妹妹知道我們程序師哥哥的威武。原型設(shè)計稿大致如下:showImg(ht...

    cncoder 評論0 收藏0

  • 一道CSS筆試題

    摘要：分析這道題主要考察的居中和寬高等比例。如果元素的高度和寬度都以某一個值作為參照系，那么理論上元素的乘以可自定義。根據(jù)規(guī)范，的值為百分比時，是相對于父元素的寬度而言。 showImg(https://segmentfault.com/img/remote/1460000011668870?w=942&h=552);如上圖所示，屏幕正中間有個元素A，隨著屏幕寬度的增加，始終需要滿足以下條件...

    aikin 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<