本篇內(nèi)容介紹了“CSS中如何實(shí)現(xiàn)寬高比”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元固鎮(zhèn)做網(wǎng)站,已為上家服務(wù),為固鎮(zhèn)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

圖像和響應(yīng)式元素的寬高間有一個(gè)一致的比例是很重要的，下面文章帶大家了解一下高寬比，aspect-ratio屬性，通過示例詳細(xì)介紹一下CSS中實(shí)現(xiàn)寬高比的方法。

什么是高寬比

根據(jù)維基百科的說(shuō)法：

在數(shù)學(xué)上，比率表示一個(gè)數(shù)字包含另一個(gè)數(shù)字的多少倍。例如，如果一碗水果中有八個(gè)橙子和六個(gè)檸檬，那么橙子和檸檬的比例是八比六（即8∶6，相當(dāng)于比值4∶3）。

在網(wǎng)頁(yè)設(shè)計(jì)中，高寬比的概念是用來(lái)描述圖像的寬度和高度應(yīng)按比例調(diào)整。

考慮下圖

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

換句話說(shuō)，我們可以為寬高比為4：3的最小框是4px * 3px框。 當(dāng)此盒式高度按比例調(diào)整為其寬度時(shí)，我們將有一個(gè)致寬尺寸的框。

考慮下圖。

盒子被按比例調(diào)整大小，其寬度和高度之間的比例是一致的?，F(xiàn)在，讓我們想象一下，這個(gè)盒子里有一張重要的圖片，我們關(guān)心它的所有細(xì)節(jié)。

請(qǐng)注意，無(wú)論大小如何，圖像細(xì)節(jié)都被保留。通過擁有一致的高寬比，我們可以獲得以下好處

• 整個(gè)網(wǎng)站的圖像將在不同的視口大小上保持一致。

• 我們也可以有響應(yīng)式的視頻元素。

• 它有助于設(shè)計(jì)師創(chuàng)建一個(gè)圖像大小的清晰指南，這樣開發(fā)者就可以在開發(fā)過程中處理它們。

計(jì)算寬高比

為了測(cè)量寬高比，我們需要將寬度除以如下圖所示的高度。

寬度和高度之間的比例是1.33。這意味著這個(gè)比例應(yīng)該得到遵守。請(qǐng)考慮

注意右邊的圖片，寬度÷高度的值是 1.02，這不是原來(lái)的長(zhǎng)寬比（1.33或4：3）。

你可能在想，如何得出4:3這個(gè)數(shù)值？嗯，這被稱為最接近的正常長(zhǎng)寬比，有一些工具可以幫助我們找到它。在進(jìn)行UI設(shè)計(jì)時(shí)，強(qiáng)烈建議你確切地知道你所使用的圖像的寬高比是多少。使用這個(gè)網(wǎng)址可以幫我們快速計(jì)算。

網(wǎng)址地址：http://lawlesscreation.github.io/nearest-aspect-ratio/

在 CSS 中實(shí)現(xiàn)寬高比

我們過去是通過在CSS中使用百分比padding 來(lái)實(shí)現(xiàn)寬高比的。好消息是，最近，我們?cè)谒兄饕臑g覽器中都得到了aspect-ratio的原生支持。在深入了解原生方式之前，我們先首先解釋一下好的老方法。

當(dāng)一個(gè)元素有一個(gè)垂直百分比的padding時(shí)，它將基于它的父級(jí)寬度。請(qǐng)看下圖。

當(dāng)標(biāo)題有padding-top: 50%時(shí)，該值是根據(jù)其父元素的寬度來(lái)計(jì)算的。因?yàn)楦冈氐膶挾仁?code>200px，所以padding-top會(huì)變成100px。

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

假設(shè)圖像寬度為260px，高度為195px。

Percentage padding = height / width

195/260的結(jié)果為 0.75（或75％）。

我們假設(shè)有一個(gè)卡片的網(wǎng)格，每張卡片都有一個(gè)縮略圖。這些縮略圖的寬度和高度應(yīng)該是相等的。

由于某些原因，運(yùn)營(yíng)上傳了一張與其他圖片大小不一致的圖片。注意到中間那張卡的高度與其他卡的高度不一樣。

你可能會(huì)想，這還不容易解決？我們可以給圖片加個(gè)object-fit: cover。問題解決了，對(duì)嗎？不是這么簡(jiǎn)單滴。這個(gè)解決方案在多種視口尺寸下都不會(huì)好看。

注意到在中等尺寸下，固定高度的圖片從左邊和右邊被裁剪得太厲害，而在手機(jī)上，它們又太寬。所有這些都是由于使用了固定高度的原因。我們可以通過不同的媒體查詢手動(dòng)調(diào)整高度，但這不是一個(gè)實(shí)用的解決方案。

我們需要的是，無(wú)論視口大小如何，縮略圖的尺寸都要一致。為了實(shí)現(xiàn)這一點(diǎn)，我們需要使用百分比padding來(lái)實(shí)現(xiàn)一個(gè)寬高比。

HTML

<article class="card">
  <div class="card__thumb">
    <img src="thumb.jpg" alt="" />
  </div>
  <div class="card__content">
    <h4>Muffins Recipe</h4>
    <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）的高度取決于其寬度。另外，圖片是絕對(duì)定位的，它有它的父元素的全部寬度和高度，有object-fit: cover，用于上傳不同大小的圖片的情況。請(qǐng)看下面的動(dòng)圖。

請(qǐng)注意，卡片大小的變化和縮略圖的長(zhǎng)寬比沒有受到影響。

aspect-ratio 屬性

今年早些時(shí)候，Chrome、Safari TP和Firefox Nightly都支持aspect-ratio CSS 屬性。最近，它在Safari 15的官方版本中得到支持。

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

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

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

請(qǐng)看下面的動(dòng)圖，了解寬高比是如何變化的。

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

有了這個(gè)，讓我們探索原始縱橫比可以有用的一些用例，以及如何以逐步增強(qiáng)的方法使用它。

漸進(jìn)增強(qiáng)

我們可以通過使用CSS @supports和CSS變量來(lái)使用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

來(lái)看看下面的 logo

你是否注意到它們的尺寸是一致的，而且它們是對(duì)齊的？來(lái)看看幕后的情況。

// 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;
}

我添加了一個(gè)130px的基本寬度，以便有一個(gè)最小的尺寸，而aspect-ratio會(huì)照顧到高度。

藍(lán)色區(qū)域是圖像的大小，object-fit: contain是重要的，避免扭曲圖像。

Responsive Circles

你是否曾經(jīng)需要?jiǎng)?chuàng)建一個(gè)應(yīng)該是響應(yīng)式的圓形元素？CSS aspect-ratio是這種使用情況的最佳選擇。

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

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

“CSS中如何實(shí)現(xiàn)寬高比”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

新聞名稱：CSS中如何實(shí)現(xiàn)寬高比
地址分享：http://jinyejixie.com/article40/psideo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站策劃、服務(wù)器托管、域名注冊(cè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)頁(yè)設(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)