国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

純css實現容器高度隨寬度等比例變化的四種解決方案

vslam / 4019人閱讀

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

使用一個隱藏的圖片來實現

這個方法是我最推薦的，因為不需要考慮任何兼容性，PC移動完美運行。除了增加了一個dom結構，但是相對與一個頁面成百上千的代碼來說，不值一提

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

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

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

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

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

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

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

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

.attr{
  width:50%;
  height: calc(50%);
}
padding-bottom實現

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

看個代碼：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111455.html

相關文章

  • 元素auto寬高的影響因素

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

    crelaber 評論0 收藏0

  • 【復習】CSS實現寬高等比自適應容器

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

    habren 評論0 收藏0

  • 【CSS練習】IT修真院--練習1-九宮格

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

    Tecode 評論0 收藏0

  • 頁面設計相關鏈接收集

    摘要：瀏覽器版本國內電腦端瀏覽器版本統計年月年月屏幕分辨率上的分辨率統計網頁設計中常見的寬高比常見顯示設備的媒體查詢標準百度統計的中國網民分辨率使用情況兼容性設置僅用于的樣式設置渲染模式設置及渲染模式樣式兼容性清單開發者指南的媒體查詢實現方案專 瀏覽器版本 StatCounter國內電腦端瀏覽器版本統計（15年8月~16年8月）； 屏幕分辨率 W3Schools上的分辨率統計； 網頁設計中...

    sean 評論0 收藏0

  • 頁面設計相關鏈接收集

    摘要：瀏覽器版本國內電腦端瀏覽器版本統計年月年月屏幕分辨率上的分辨率統計網頁設計中常見的寬高比常見顯示設備的媒體查詢標準百度統計的中國網民分辨率使用情況兼容性設置僅用于的樣式設置渲染模式設置及渲染模式樣式兼容性清單開發者指南的媒體查詢實現方案專 瀏覽器版本 StatCounter國內電腦端瀏覽器版本統計（15年8月~16年8月）； 屏幕分辨率 W3Schools上的分辨率統計； 網頁設計中...

    supernavy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<