![]() Example 1: Netflix’s go-to aspect ratios are 16:9 and 2:1. It can also be written with an x between the numbers. It's usually written as two numbers separated by a colon, as in 16:9. We can make that tag the aspect ratio box and apply the lockup as a background image. What is aspect ratio Aspect ratio is the relationship between width and height of an image. It’s for the title of an article, so it makes sense to use an tag. If the width changes, so does the height, and the element keeps that aspect ratio. Now we have a friendly aspect ratio box, that works well in fluid width environments. Now imagine instead of 100% top padding, we used 56.25%. Then padding will be the only part of the box model affecting the height, and we’ll have our square. If we force the height of the element to zero ( height: 0 ) and don’t have any borders. Isn’t that a perfect square, 500px × 500px? Yes, it is! An aspect ratio! So if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px. This isn’t a hack, but it is weird: padding-top and padding-bottom is based on the parent element’s width. As an additional feature, you can measure the physical, or print size, of your scaled resolution by entering the PPI (pixels per inch) in the pixel density field, under the digital to physical dimensions section. The Core Concept: padding in percentages is based on widthĮven when that is a little unintuitive, like for vertical padding. Enter 2560x1440 in the scaled resolution. Let’s go on a little journey through this concept, as there is plenty to talk about. 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. I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |