跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

相关文章
aspect ratio

20篇文章
{
,

}
指向“弱声明”文章的直接链接
纵横比

“弱声明”

PPK 谈论 aspect-ratio,这是一个用于布局的 CSS 属性,它在很大程度上按照你预期的那样工作。现在它在 Firefox 和 Safari 中处于一个标志的后面,因此它变得越来越有趣,因此我们将…

Avatar of Chris Coyier
Chris Coyier 发表于 2021年6月23日
指向“具有沿对角线相遇的圆锥渐变的可变纵横比卡片”文章的直接链接
纵横比 圆锥渐变

具有沿对角线相遇的圆锥渐变的可变纵横比卡片

我最近遇到一个有趣的问题。我需要实现一个卡片网格,这些卡片具有存储在 --ratio 自定义属性中的可变(用户设置)纵横比。具有特定纵横比的方框是…中的一个经典问题。

Avatar of Ana Tudor
Ana Tudor 发表于 2021年5月10日
指向“Chrome 88 中的新功能:aspect-ratio”文章的直接链接
纵横比 chrome

Chrome 88 中的新功能:aspect-ratio

而且它是在昨天发布的!对于我们 CSS 界来说,重大消息是新版本支持 aspect-ratio 属性。这紧随 Safari宣布支持它在 Safari Technology Preview 118 中…

Avatar of Geoff Graham
Geoff Graham 发表于 2021年1月25日
指向“`aspect-ratio` 将会使 FitVids 过时”文章的直接链接
纵横比 视频

`aspect-ratio` 将会使 FitVids 过时

Jen 刚刚发布推文,内容是关于最新的 Safari 技术预览版中包含了 aspect-ratio。看起来 Chrome 和 Firefox 都在标志的后面支持它,因此随着 Safari 加入这个行列,我们很快就会都拥有它。

我尝试过它…

Avatar of Chris Coyier
Chris Coyier 发表于 2021年1月8日
指向“可变比例布局中的流体图像”文章的直接链接
纵横比 响应式图像

可变比例布局中的流体图像

在如今,当图像单独存在于布局中时,创建流体图像非常容易。但是,随着更复杂的界面,我们经常需要将图像放置在响应式元素中,就像这个卡片

现在,假设这张图像不是语义化的…

Avatar of Lari Maza
Lari Maza 发表于 2020年7月3日
指向“首次了解 `aspect-ratio`”文章的直接链接
纵横比

首次了解 `aspect-ratio`

哦,天哪!一个影响盒子尺寸的新属性!这是大事。已经有很多方法可以制作一个纵横比大小的盒子(我认为这个基于自定义属性的解决方案是最好的)…

Avatar of Chris Coyier
Chris Coyier 发表于 2020年7月1日
指向“一个方块的 Logo 网格”文章的直接链接
纵横比 网格

一个方块的 Logo 网格

让我们构建一个字面意义上的方块网格,然后将一些杂志的 Logo 居中放置在每个方块中。我想你们很多人都需要构建过 Logo 网格。你可能已经可以想象了:一个区域…

Avatar of Chris Coyier
Chris Coyier 发表于 2020年4月7日
指向“#179:一个方块的网格”文章的直接链接
纵横比 网格

#179:一个方块的网格

使用 CSS 网格来制作一个网格,这,嗯,是它的主要目的。但如果想让所有这些网格项目保持纵横比,比如 1:1 的方块?这是可能的,但需要一些技巧。在这个…

Avatar of Chris Coyier
Chris Coyier 发表于 2020年4月9日
指向“流体宽度视频”文章的直接链接
纵横比 响应式 视频

流体宽度视频

在一个充满响应式和流体布局的网页世界中,有一种媒体类型阻碍了完美的和谐:视频。在你的网站上可以有很多种方式显示视频。你可能会自行托管…

Avatar of Chris Coyier
Chris Coyier 发表于 2020年3月11日
  • 1
  • 2
  • 3
  • 旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

阅读我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律声明
  • 获取免费信用额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告!
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.