Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
aspect ratio

20 Articles
{
,

}
Direct link to the article “Weak declaration”
aspect ratio

“Weak declaration”

PPK looks at aspect-ratio, a CSS property for layout that, for the most part, does exactly what you would think it does. It’s getting more interesting as it’s behind a flag in Firefox and Safari now, so we’ll have …

Avatar of Chris Coyier
Chris Coyier on Jun 23, 2021
Direct link to the article Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal
aspect ratio conic gradients

Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal

I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom property. Boxes with a certain aspect ratio are a classic problem in …

Avatar of Ana Tudor
Ana Tudor on May 10, 2021
Direct link to the article New in Chrome 88: aspect-ratio
aspect ratio chrome

New in Chrome 88: aspect-ratio

Direct Link

And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of Safari announcing support for it in Safari Technology Preview 118, …

Avatar of Geoff Graham
Shared by Geoff Graham on Jan 20, 2021 (Updated on Jan 25, 2021)
Direct link to the article `aspect-ratio` is going to deprecate FitVids
aspect ratio video

`aspect-ratio` is going to deprecate FitVids

Jen was just tweetin’ about how the latest Safari Technical Preview has aspect-ratio. Looks like Chrome and Firefox both have it behind a flag, so with Safari joining the party, we’ll all have it soon.

I played with it …

Avatar of Chris Coyier
Chris Coyier on Jan 8, 2021
Direct link to the article Fluid Images in a Variable Proportion Layout
aspect ratio responsive images

Fluid Images in a Variable Proportion Layout

Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card:

For now, let’s say this image is not semantic …

Avatar of Lari Maza
Lari Maza on Jul 3, 2020
Direct link to the article A First Look at `aspect-ratio`
aspect ratio

A First Look at `aspect-ratio`

Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d say this custom properties based solution is the best), …

Avatar of Chris Coyier
Chris Coyier on May 28, 2020 (Updated on Jul 1, 2020)
Direct link to the article A Grid of Logos in Squares
aspect ratio grid

A Grid of Logos in Squares

Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area …

Avatar of Chris Coyier
Chris Coyier on Apr 6, 2020 (Updated on Apr 7, 2020)
Direct link to the article #179: A Grid of Squares
aspect ratio grid

#179: A Grid of Squares

Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this …

Avatar of Chris Coyier
Chris Coyier on Apr 6, 2020 (Updated on Apr 9, 2020)
Direct link to the article Fluid Width Video
aspect ratio responsive video

Fluid Width Video

IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting …

Avatar of Chris Coyier
Chris Coyier on Mar 11, 2020
Direct link to the article Do This to Improve Image Loading on Your Website
aspect ratio images performance

Do This to Improve Image Loading on Your Website

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have …

Avatar of Robin Rendle
Robin Rendle on Feb 19, 2020
Direct link to the article Centering a div That Maintains Aspect-Ratio When There’s Body Margin
aspect ratio centering

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Andrew Welch had a little CSS challenge the other day to make an ordinary div:

• centered vertically + horizontally
• scales to fit the viewport w/ a margin around it
• maintains an arbitrary aspect ratio
• No JS

…
Avatar of Chris Coyier
Chris Coyier on Feb 18, 2020
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top