2024年前端最新宝， 来学习一下CSS中的宽高比，让 h5 开发更想你的夜！(4)，秋招面试的自我介绍

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Percentage padding = height / width

195/260的结果为 0.75（或75％）。

我们假设有一个卡片的网格，每张卡片都有一个缩略图。这些缩略图的宽度和高度应该是相等的。

由于某些原因，运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。

你可能会想，这还不容易解决？我们可以给图片加个object-fit: cover。问题解决了，对吗？不是这么简单滴。这个解决方案在多种视口尺寸下都不会好看。

注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。

我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这一点，我们需要使用百分比padding来实现一个宽高比。

HTML

Muffins Recipe

Servings: 3

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

• 

  .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

  结尾

  学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】