終於搞懂了 CSS 中的寬高比是基於什麼工作的了!

2021-12-29 大遷世界

終於搞懂了 CSS 中的百分比是基於什麼工作的了!

在圖像和其他響應式元素的寬度和高度之間有一個一致的比例是很重要的。在CSS中,我們使用padding hack已經很多年了,但現在我們在CSS中有了原生的長寬比支持。

在這篇文章中,我們將討論什麼是寬高比,我們過去是怎麼做的,新的做法是什麼。當然,也會有一些用例,對它們進行適當的回退。

什麼是高寬比

根據維基百科的說法:

在數學上,比率表示一個數字包含另一個數字的多少倍。例如,如果一碗水果中有八個橙子和六個檸檬,那麼橙子和檸檬的比例是八比六(即8∶6,相當於比值4∶3)。

在網頁設計中,高寬比的概念是用來描述圖像的寬度和高度應按比例調整。

考慮下圖

比率是4:3,這表明蘋果和葡萄的比例是4:3。

換句話說,我們可以為寬高比為4:3的最小框是4px * 3px框。當此盒式高度按比例調整為其寬度時,我們將有一個致寬尺寸的框。

考慮下圖。

盒子被按比例調整大小,其寬度和高度之間的比例是一致的。現在,讓我們想像一下,這個盒子裡有一張重要的圖片,我們關心它的所有細節。

請注意,無論大小如何,圖像細節都被保留。通過擁有一致的高寬比,我們可以獲得以下好處

它有助於設計師創建一個圖像大小的清晰指南,這樣開發者就可以在開發過程中處理它們。計算寬高比

為了測量寬高比,我們需要將寬度除以如下圖所示的高度。

寬度和高度之間的比例是1.33。這意味著這個比例應該得到遵守。請考慮

注意右邊的圖片,寬度÷高度的值是 1.02,這不是原來的長寬比(1.33或4:3)。

你可能在想,如何得出4:3這個數值?嗯,這被稱為最接近的正常長寬比,有一些工具可以幫助我們找到它。在進行UI設計時,強烈建議你確切地知道你所使用的圖像的寬高比是多少。使用這個網址可以幫我們快速計算。

網址地址:http://lawlesscreation.github.io/nearest-aspect-ratio/

在 CSS 中實現寬高比

我們過去是通過在CSS中使用百分比padding 來實現寬高比的。好消息是,最近,我們在所有主要的瀏覽器中都得到了aspect-ratio的原生支持。在深入了解原生方式之前,我們先首先解釋一下好的老方法。

當一個元素有一個垂直百分比的padding時,它將基於它的父級寬度。請看下圖。

當標題有padding-top: 50%時,該值是根據其父元素的寬度來計算的。因為父元素的寬度是200px,所以padding-top會變成100px。

為了找出要使用的百分比值,我們需要將圖像的高度除以寬度。得到的數字就是我們要使用的百分比。

假設圖像寬度為260px,高度為195px。

Percentage padding = height / width

195/260的結果為 0.75(或75%)。

我們假設有一個卡片的網格,每張卡片都有一個縮略圖。這些縮略圖的寬度和高度應該是相等的。

由於某些原因,運營上傳了一張與其他圖片大小不一致的圖片。注意到中間那張卡的高度與其他卡的高度不一樣。

你可能會想,這還不容易解決?我們可以給圖片加個object-fit: cover。問題解決了,對嗎?不是這麼簡單滴。這個解決方案在多種視口尺寸下都不會好看。

注意到在中等尺寸下,固定高度的圖片從左邊和右邊被裁剪得太厲害,而在手機上,它們又太寬。所有這些都是由於使用了固定高度的原因。我們可以通過不同的媒體查詢手動調整高度,但這不是一個實用的解決方案。

我們需要的是,無論視口大小如何,縮略圖的尺寸都要一致。為了實現這一點,我們需要使用百分比padding來實現一個寬高比。

HTML

<article class="card">
  <div class="card__thumb">
    <img src="thumb.jpg" alt="" />
  </div>
  <div class="card__content">
    <h3>Muffins Recipe</h3>
    <p>Servings: 3</p>
  </div>
</article>

CSS

.card__thumb {
  position: relative;
  padding-top: 75%;
}

.card__thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

通過上述,我們定義了卡片縮略圖包裝器(.card__thumb)的高度取決於其寬度。另外,圖片是絕對定位的,它有它的父元素的全部寬度和高度,有object-fit: cover,用於上傳不同大小的圖片的情況。請看下面的動圖。

請注意,卡片大小的變化和縮略圖的長寬比沒有受到影響。

aspect-ratio 屬性

今年早些時候,Chrome、Safari TP和Firefox Nightly都支持aspect-ratioCSS 屬性。最近,它在Safari 15的官方版本中得到支持。

我們回到前面的例子,我們可以這樣改寫它。

/* 上面的方式 */
.card__thumb {
  position: relative;
  padding-top: 75%;
}

/* 使用 aspect-ratio 屬性 */
.card__thumb {
  position: relative;
  aspect-ratio: 4/3;
}

請看下面的動圖,了解寬高比是如何變化的。

Demo 地址:https://codepen.io/shadeed/pen/ZEeMjZe

有了這個,讓我們探索原始縱橫比可以有用的一些用例,以及如何以逐步增強的方法使用它。

漸進增強

我們可以通過使用CSS @supports和CSS變量來使用CSS aspect-ratio。

.card {
  --aspect-ratio: 16/9;
  padding-top: calc((1 / (var(--aspect-ratio))) * 100%);
}

@supports (aspect-ratio: 1) {
  .card {
    aspect-ratio: var(--aspect-ratio);
    padding-top: initial;
  }
}

Logo Images

來看看下面的 logo

你是否注意到它們的尺寸是一致的,而且它們是對齊的?來看看幕後的情況。

// html
<li class="brands__item">
  <a href="#">
    <img src="assets/batch-2/aanaab.png" alt="" />
  </a>
</li>

.brands__item a {
  padding: 1rem;
}

.brands__item img {
  width: 130px;
  object-fit: contain;
  aspect-ratio: 2/1;
}

我添加了一個130px的基本寬度,以便有一個最小的尺寸,而aspect-ratio會照顧到高度。

藍色區域是圖像的大小,object-fit: contain是重要的,避免扭曲圖像。

Responsive Circles

你是否曾經需要創建一個應該是響應式的圓形元素?CSS aspect-ratio是這種使用情況的最佳選擇。

.person {
  width: 180px;
  aspect-ratio: 1;
}

如果寬高比的兩個值相同,我們可以寫成aspect-ratio: 1而不是aspect-ratio: 1/1。如果你使用flexbox或grid,寬度將是可選的,它可以被添加作為一個最小值。

~完,我是小智,寶,你學會了嗎~

作者:Ahmad Shadeed  譯者:前端小智  來源:shadeed原文:https://ishadeed.com/article/css-aspect-ratio/

相關焦點

  • 原來css中的border還可以這樣玩
    前面的話:在看這篇文章之前你可能會覺得border只是簡單的繪製邊框,看了這篇文章,我相信你也會跟我一樣說一句「我靠,原來css中的
  • 面試中常問的幾個CSS問題
    使用 CSS 如何畫一個三角形/* 原理:四邊形對角線連線後劃分為四個三角形,** 把其中三個隱藏,css中可以使用
  • Web前端設計秘籍——30個工作中常用的CSS樣式
    而由於樣式效果非常多,在工作中並非所有的樣式都會用到,因此經常可能遇到某些特定樣式會突然想不起來的情況,更何況對於初學者來說遇到這種情況。接下來就跟著小凡一起整理一下這些常用而易忘的css樣式。PS:網頁中英文單詞通過「_」(下劃線)和 「-」(中劃線)連接的英文單詞在編譯處理是方式是截然不同的。
  • 請正確選擇攝影的寬高比
    那麼這是什麼原因造成的呢?答案就是您拍攝時忽略了寬高比的正確選擇。 什麼是寬高比,它與圖像解析度有何不同?那麼您如何知道哪個比例最適合您的攝影呢?在本文,我們將向您介紹攝影中最常見的寬高比,並詳細講解每個寬高比的使用規則。什麼是寬高比?
  • CSS 奇思妙想 | 巧妙地使用 CSS 計數器實現九宮格自動提示超出數量
    原文連結: https://juejin.cn/post/6983939983720022053經常在某些 app 中看到這樣的九宮格設計。當縮略圖不足 9 張時,正常排列,當超過 9 張時,會提示還剩多少張,如下:如何使用純 CSS 實現這一效果呢?
  • 【CSS】1068- Flex布局中一個不為人知的特性
    ...我期待它不管什麼時候都能像下面這樣顯示(不撐破父容器):然鵝,還是不知道原因吖,搜尋引擎找了一番也沒找到什麼有說服力的答案,於是,我決定研究一下 flex 的規範(https://www.w3.org/TR/css-flexbox-1/#min-size-auto
  • 聊聊純 CSS 圖標
    現有方案有個名為 `css.gg`[8] 的純 CSS 圖標解決方案,它完全通過偽元素(::before,::after)來構建圖標。使用這種方案意味著你需要對 CSS 工作原理有深刻的理解,但同時也很難創造更為複雜的圖標(只有3個元素可以使用)。
  • Python學習第233課——css中的長度單位
    我們還是回到css的知識,css是用來修飾網頁的,前面說到網頁中的元素一般需要我們給定寬高,這個寬度和高度就需要在css裡面去寫。無論是寬度還是高度,都屬於長度,既然是長度,就有長度單位,比如公裡、米、分米、釐米、毫米等。
  • 工作中常用CSS基礎知識整理匯總
    <style type="text/css">.div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left
  • web前端學習什麼是css盒子模型
    web前端學習什麼是css盒子模型? 在網頁中,一個元素佔有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。
  • DIV+CSS中讓布局居中_背景圖片居中_文字內容居中
    1、首先介紹使用css屬性讓整體布局的居中:設置對象的父級內容居中,這裡一個頁面的為父級是什麼呢?  」,一旦你內容布局中在最外層css控制中,設置了float:屬性,那布局將會向你設置的float:方向靠,解決方法,除了設置body的居中的css屬性外,還需對布局對象設置居中 ,而且或定義寬度是多少,假如網頁寬度為700px,最外層css樣式為的class="weicheng",那設置應該這樣「.weicheng{margin:0 auto; width:700px;}  」即可而這個元素在IE
  • css布局史 - grid一統天下
    而作為前端三劍客的css呢?似乎css3已經是很久很久的事情了,久到了我們不知道它是否還在更新,css是否還有新的技術產生。雖然各種scss,stylus,less預處理器提高了我們代碼的開發和維護,但是css依然缺少一個一擊致命,一劍封喉的技術。
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫今天我們來繼續復盤一些工作中常用的css技巧和知識,以便我們可以更加優雅的用css實現富有動感的網站.
  • CSS中鮮為人知color的四種表示方法
    每天一點PS·點綴生活色彩  css
  • CSS的親兒子,居然不是Less??
    在這裡要明確一個概念,什麼是CSS預處理語言呢? 簡單來說CSS 預處理器定義了一種新的語言,其基本思想是:用一種專門的程式語言,為 CSS 增加了一些編程的特性,將 CSS 作為目標生成文件。然後開發者就只要使用這種語言進行編碼工作。
  • CSS 常見小知識點,一網打盡!
    display 設置為 inline-block 、table-block 、 table-captionoverflow 的值不為 visiblefloat 的值不為 noneMDN 格式化上下文BFC的定位方案內部的box會在 垂直方向上 一個接一個的擺放屬於同一個BFC中的兩個相鄰元素的
  • 如何在HTML文檔中使用CSS樣式表?
    </p> <p>夜來幽夢忽還鄉,小軒窗,正梳妝。相顧無言,惟有淚千行。料得年年腸斷處,明月夜,短松岡。</p> </body></html>步驟5:最後保存HTML文件並運行它。在瀏覽器中成功執行代碼後會得到輸出結果。
  • 使用 PostCSS 插件讓你的網站支持暗黑模式
    當前假設我們的 webapp 是基於 webpack 構建的。module: {    rules:[        //...3、如果這個 css 選擇器中, 沒有 css 屬性,就刪除這個選擇器4、在 css 選擇器前面加上 .theme樣式名稱老項目升級原來的項目中可能沒有區分顏色變量到單獨的樣式文件中,在樣式中可能寫了顏色絕對值。
  • 好玩的 CSS - 40 個有趣的 CSS 網站
    🌐 基礎學習cssreference.io/[1] CSS 參考書chokcoco.github.io/CSS-Inspira…[2] CSS 靈感www.awwwards.com/sites/zero-…[3] UI 設計師的靈感源泉
  • 程序屋|令人驚豔的CSS框架TailWindCSS的安裝使用教程
    >Tailwind CSS 是一個功能類優先的 CSS 框架,它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類,它們能直接在腳本標記語言中組合起來,構建出任何設計。