关于前端:宝-来学习一下CSS中的宽高比让-h5-开发更想你的夜

作者：Ahmad Shadeed
译者：前端小智
起源：shadeed

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在图像和其余响应式元素的宽度和高度之间有一个统一的比例是很重要的。在 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…

在 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-ratio CSS 属性。最近，它在 Safari 15 的官网版本中失去反对。

咱们回到后面的例子，咱们能够这样改写它。

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

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

请看上面的动图，理解宽高比是如何变动的。

Demo 地址：https://codepen.io/shadeed/pe…

有了这个，让咱们摸索原始纵横比能够有用的一些用例，以及如何以逐渐加强的办法应用它。

渐进加强

咱们能够通过应用 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 ，宽度将是可选的，它能够被增加作为一个最小值。

~ 完，我是小智，宝，你学会了吗~

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://ishadeed.com/article/…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。