#aspectratio

PPC Landppcland
2025-07-04

Meta's complex aspect ratio requirements span 25 ad placements: Platform's extensive placement options create technical challenges for advertisers managing creative assets. ppc.land/metas-complex-aspect-

ArchUpArchup
2025-05-06

Differentiating between shear walls and columns is crucial in structural design, especially when their geometries overlap. While both elements transfer loads, their behavior under stress, reinforcement requirements, and design criteria vary significantly.

archup.net/shear-wall-vs-colum

ArchUpArchup
2025-05-05

Differentiating between shear walls and columns is crucial in structural design, especially when their geometries overlap. While both elements transfer loads, their behavior under stress, reinforcement requirements, and design criteria vary significantly.

archup.net/shear-wall-vs-colum

2025-04-30

Max props to @scottjehl whose 2023 article (about his 2023 #Firefox contribution!) inspired my own experiments in variable #aspectRatio, #HLS, (mostly) vanilla #HTML web #video

This was fun:

danq.me/variable-aspect-hls-vi

ArchUpArchup
2025-04-21

Differentiating between shear walls and columns is crucial in structural design, especially when their geometries overlap. While both elements transfer loads, their behavior under stress, reinforcement requirements, and design criteria vary significantly.

archup.net/shear-wall-vs-colum

ArchUpArchup
2025-04-20

Differentiating between shear walls and columns is crucial in structural design, especially when their geometries overlap. While both elements transfer loads, their behavior under stress, reinforcement requirements, and design criteria vary significantly.

archup.net/shear-wall-vs-colum

Erik Schlicksbiererik@photog.social
2025-02-12

Always when I see YouTube videos about #cinematography, #aspectratio and how #Cinemascope / #widescreen is a "problem" for framing just the face of a person, because of all the "empty dead room", I just wish that these dudes would watch "The Ipcress File" at some point ...

#filmmaking

Screenshot "The Ipcress File"Screenshot "The Ipcress File"Screenshot "The Ipcress File"Screenshot "The Ipcress File"
Línea de Códigolineadecodigo
2025-01-20
Ana Tudor 🐯anatudor
2024-12-19

Pretty sure I've posted about this before, but a quick search at the morning hours didn't find it, plus I saw someone ask about it yet again¹, so... fixed aspect-ratio box within variable size container!

Live on @codepen codepen.io/thebabydino/pen/ogv

¹here reddit.com/r/css/comments/1hhf

.parent {
  display: grid; /* for child middle alignment */
  container-type: size; /* for child sizing */
  /* random ass parent sizing */
  width: min(60em, 90%);
  height: min(800px, 50vh);
  background: dodgerblue /* make its boundary visible */
}

.aspect-ratio-child {
  --r: 8/ 5;
  place-self: center; /* put it in the middle along both axes */
  /* the magic, using container query units */
  width: min(100cqw, var(--r)*100cqh);
  height: min(100cqh, 100cqw/(var(--r)));
  /* or use aspect-ratio: var(--r) instead of height, but... pixel rounding issues */
  background: crimson /* make its boundary visible */
}
Joe B. Wallrakontisto
2024-11-13

My favorite aspect ratios:

1. 1:1 (for objects and places)
2. 3:4 (for people and small chickens)

Kevin Karhan :verified:kkarhan@infosec.space
2024-10-21

@pixel not only do I hate video in the #wrong #AspectRatio (our FOV is horizontal, otherwise we'd have eyes stacked over each other) but I hate how these are not only #looping but also not providing basic #video #controls.

Inautiloinautilo
2024-10-05


Building the perfect logo strip · How to attractively display logos in a row with CSS? ilo.im/1609pe

_____

2024-09-24

Черт тебя возьми, CSS. Часть 3

Привет, Хабр. Я продолжаю делиться «косяками» CSS, которые могут сбить нас с толку. Мне не нравится, что многие плюются от него. Конечно, не без оснований. Я их понимаю, потому что тоже плевался. Только мне нравится CSS. Хоть и потратил множество часов на изучение неочевидных моментов, я не хочу, чтобы у языка была слава «костыля». Подумав, как помочь другим меньше мучиться, я собираю и объясняю неочевидности CSS. Сегодня мы рассмотрим: Нюансы работы синтаксиса of S для псевдо-класса :nth-child() ; Случаи использования свойства aspect-ratio неожиданно ломающие вёрстку; Различия между псевдо-классом lang() и селектором по атрибуту [lang=""] . Давайте посмотрим, что я вам подготовил.

habr.com/ru/companies/ruvds/ar

#css #aspectratio #ruvds_статьи

Ana Tudor 🐯anatudor
2024-06-12

Want a box with a fixed aspect-ratio which always touches either the horizontal or the vertical edges? Use CSS `min()` for both the `width` and the `height`.

Live test on @codepen codepen.io/thebabydino/pen/vYw

Because I saw reddit.com/r/webdev/comments/1 and yikes! 😱

Illustration of desired result.

If page aspect ratio is greater than desired box aspect ratio, the box stretches across the whole viewport vertically and is in the middle horizontally.

If page aspect ratio is smaller than desired box aspect ratio, the box stretches across the whole viewport horizontally and is in the middle vertically.The CSS achieving this result.

/* grid layout */
html, body { display: grid }

/* make root full viewport height */
html { height: 100% }

/* ditch margin around body */
body { margin: 0 }

div {
	--r: 16/9; /* aspect ratio */
	/* in the middle along both axes */
	place-self: center;
	/* essential dimensions */
	/* width is either that of viewport
	 * or computed from viewport height & 
	 * aspect-ratio, whichever's smaller */
	width: min(100vw, var(--r)*100vh);
	height: min(100vh, 100vw/(var(--r)));
	background: crimson /* make visible */
}

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst