{"id":276474,"date":"2018-09-17T06:50:46","date_gmt":"2018-09-17T13:50:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=276474"},"modified":"2018-09-17T06:50:46","modified_gmt":"2018-09-17T13:50:46","slug":"aspect-ratio-media-elements-and-intrinsicsize","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/aspect-ratio-media-elements-and-intrinsicsize\/","title":{"rendered":"Aspect Ratio Media Elements and intrinsicsize"},"content":{"rendered":"

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

But media elements like <img><\/code> don’t have children. The <video><\/code> 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 external resource.” So, how do you enforce aspect ratio on them when using a variable width like 100%<\/code> or 75vw<\/code>? Well, once they load, they will have their natural aspect ratio, so that’s nice. But it also means they don’t know the height while they are loading and it may cause performance jank-ening reflow.<\/p>\n

<\/p>\n

One solution is to put them into a container with an aspect ratio, forcing them to the corners with absolute positioning. But, all by themselves, they are incapable of sizing to the aspect ratio correctly until they load.<\/p>\n

Hence, the intrinsicsize<\/code> attribute for “all image element types (including SVG images) and videos” that is now under development<\/a>.<\/p>\n

<img intrinsicsize=\"400x300\" style=\"width: 100%\"><\/code><\/pre>\n
The explainer document<\/a> is helpful. The reason it is intrinsicsize<\/code> and not aspectratio<\/code> is because an aspect ratio doesn’t provide as much useful or usable information. I’d love to see it work on any element and be brought to CSS as well.<\/p>\n","protected":false},"excerpt":{"rendered":"
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), […]<\/p>\n","protected":false},"author":3,"featured_media":276499,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"A new `intrinsicsize` attribute is under development to help maintain aspect ratio for media elements prior to load to prevent reflow jank.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1268],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":311235,"url":"https:\/\/css-tricks.com\/a-first-look-at-aspect-ratio\/","url_meta":{"origin":276474,"position":0},"title":"A First Look at `aspect-ratio`","date":"May 28, 2020","format":false,"excerpt":"Oh hey! A brand new property that affects how a box is sized! That's a big deal. 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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333130,"url":"https:\/\/css-tricks.com\/new-in-chrome-88-aspect-ratio\/","url_meta":{"origin":276474,"position":1},"title":"New in Chrome 88: aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of Safari announcing support for it in Safari Technology Preview 118, which released January 6. That gives us something to look forward\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/chrone-aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284424,"url":"https:\/\/css-tricks.com\/designing-an-aspect-ratio-unit-for-css\/","url_meta":{"origin":276474,"position":2},"title":"Designing An Aspect Ratio Unit For CSS","date":"March 13, 2019","format":false,"excerpt":"Rachel Andrew says that the CSS Working Group designed an aspect ratio unit at a recent meeting. The idea is to find an elegant solution to those times when we want the height of an element to be calculated in response to the width of the element, or vice versa.\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":289000,"url":"https:\/\/css-tricks.com\/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing\/","url_meta":{"origin":276474,"position":3},"title":"What if we got aspect-ratio sized images by doing almost nothing?","date":"June 6, 2019","format":false,"excerpt":"Say you have an image you're using in an 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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"image.jpg","width":350,"height":200},"classes":[]},{"id":261978,"url":"https:\/\/css-tricks.com\/aspect-ratios-grid-items\/","url_meta":{"origin":276474,"position":4},"title":"Aspect Ratios for Grid Items","date":"November 15, 2017","format":false,"excerpt":"We've covered Aspect Ratio Boxes before. It involves trickery with padding such that an element's width and height are in proportion to your liking. It's not an ultra-common need, since fixing an element's height is asking for trouble, but it comes up. One way to lower the risk is The\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342669,"url":"https:\/\/css-tricks.com\/weak-declaration\/","url_meta":{"origin":276474,"position":5},"title":"“Weak declaration”","date":"June 23, 2021","format":false,"excerpt":"PPK looks at aspect-ratio, a CSS property for layout that, for the most part, does exactly what you would think it does. It's getting more interesting as it's behind a flag in Firefox and Safari now, so we'll have universal support pretty darn soon. I liked how he called it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/276474"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=276474"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/276474\/revisions"}],"predecessor-version":[{"id":276500,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/276474\/revisions\/276500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/276499"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=276474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=276474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=276474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}