AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Maintain aspect ratio calculator3/25/2023 ![]() And if they win, they break the aspect-ratio. It looks like that general intuitiveness carries on here: the min-* and max-* properties will either win or are irrelevant. So, max-width is either ignored because you’re already under it, or wins. Same deal with max-width: if you set width: 100px and max-width: 50px then max-width will win. So, min-width is either ignored because you’re already over it, or wins. If you set width: 100px and min-width: 200px then min-width will win. ![]() One of them always “wins.” It’s generally pretty intuitive. There is always a little tension between width, min-width, and max-width (or the height versions). The combination of an explicit height and width is “stronger” than the aspect ratio. Demo If the element has both a height and width, aspect-ratio is ignored. So aspect-ratio is basically a way of setting the other direction when you only have one. That’s why the pseudo-element tactic for aspect ratios was popular, because it didn’t put us in dangerous data loss or awkward overlap territory when content got too much.īut if you want to constrain the height to the aspect ratio, you can by adding a min-height: 0 : Demo If the element has either a height or width, the other is calculated from the aspect ratio. The aspect ratio becomes ignored in that situation, which is actually nice. So the height can be calculated from the aspect ratio and the rendered width.el Demo If the content breaks out of the aspect ratio, the element will still expand. Without setting a width, an element will still have a natural auto width. Just dropping aspect-ratio on an element alone will calculate a height based on the auto width. Shout out to Una where I first saw this and boy howdy did it strike interest in folks. So, with the impending arrival of aspect-ratio ( MDN, and not to be confused with the media query version), I thought I’d take a look at how it works and try to wrap my mind around it. Most digital images have square pixels with an aspect ratio of 1:1, although some use rectangular aspect. For instance, the pixel aspect ratio of 2:1 would indicate that each pixel is twice as wide as its height. 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), but none of them are particularly intuitive and certainly not as straightforward as declaring a single property. Pixel aspect ratio (PAR) is a proportional relationship of image pixels, in other words, the ratio of a pixel's width to its height. Oh hey! A brand new property that affects how a box is sized! That’s a big deal.
0 Comments
Read More
Leave a Reply. |