Skip to main content
CSS is fun and cool and I like it.
Article

Responsive Iframes

Say you wanted to put the CSS-Tricks website in an <iframe></iframe>. You'd do that like this:

<iframe src="https://css-tricks.com"></iframe>

Without any other styling, you'd get a rectangle that is 300x150 pixels in size. That's not even in the User Agent stylesheet, it's just some magical thing about iframes (and objects). That's almost certainly not what you want, so you'll often see width and height attributes right on the iframe itself (YouTube does this).

<iframe width="560"
  height="315"
  src="https://css-tricks.com"></iframe>

Those attributes are … Read article

Article

The Fight Against Layout Jank

A web page isn't locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their size, which typically isn't known in fluid layouts until they do render. Or fonts can load and reflow layout. Or XHRs can bring in more content to be placed onto the page. We're always doing what we can to prevent the layout from shifting around — that's what I mean … Read article

Article

What if we got aspect-ratio sized images by doing almost nothing?

Say you have an image you're using in an <img /> that is 800x600 pixels. Will it actually display as 800px wide on your site? It's very likely that it will not. We tend to put images into flexible container elements, and the image inside is set to width: 100%;. So perhaps that image ends up as 721px wide, or 381px wide, or whatever. What doesn't change is that image's aspect ratio, lest you squish it awkwardly (ignoring the … Read article

Link

Designing An Aspect Ratio Unit For CSS

Link

What’s New In CSS?

Article

Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized <div></div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width.

But media elements like <img /> don't have children. The <video></video> tag isn't self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don't control. Besides, these are the only two elements that "size to an … Read article

Article

Aspect Ratio Boxes

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.

Let's go on a little journey through this concept, as there is plenty to talk about.… Read article

Article

Scaled/Proportional Content with CSS and JavaScript

The web is a fluid place. Different sized screens, yadda yadda yadda. Fortunately for us, the web is ready for it. Text wraps. CSS gives us control over how to size things. What we don't get (easily, anyway) is a way to scale whole element (and it's children) proportionally—retaining its exact layout as it changes size.

We can do it though.… Read article

icon-link icon-logo-star icon-search icon-star