![]() That image has the same aspect ratio as the box it appears in, but apparently uses a different calculation. In the examples you’ll often see a narrow stripe of red poking from underneath the background image. That’s why the calculated aspect ratio of a box is rarely 100% exact. Fractions are discarded somewhere along the way. RoundingĮven if aspect-ratio works fine the browser must find an integer number of device pixels for the box’s width and height. Now both width and height are strong and the aspect ratio is ignored. The third box has a fixed width: 150px height: 100px as well as an aspect-ratio: 16/9. ![]() Thus the box’s width is calculated by taking the height and applying the aspect ratio. The height is strong, but the auto width is weak and allows aspect-ratio to override it. The second box has a height: 50px width: auto. aspect-ratio takes the width, converts it to pixels, and applies the defined aspect ratio to calculate the height. as much width as you can take, and as little height as you need. The first box has width: auto height: auto i.e. In this example all three boxes have aspect-ratio: 16/9. Width and height might be specified by explicit width and height declarations or by other means, as we’ll see below. If the box has a specified width and height the browser uses those values and ignores the aspect ratio. [ Would you like to improve your CSS? You can hire me as aĪspect-ratio defines the ratio between the width and height of a box, but it is a weak declaration. You need one of these browsers to see the examples below - except for the fallback, which should work in all browsers that support custom properties. I also wrote a little fallback that you might use if you need aspect-ratio right now.Īt the time of writing aspect-ratio is supported by Chrome 90, by Safari Technology Preview, and by Firefox 88 if you set the aspect-ratio flag in about:config. Una Kravets wrote the introductory article, but there are some additional technical points to be made. This week we’ll take a look at the new aspect-ratio declaration and its use.
0 Comments
Leave a Reply. |