{"id":332875,"date":"2021-01-20T10:54:28","date_gmt":"2021-01-20T18:54:28","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=332875"},"modified":"2022-09-07T13:54:15","modified_gmt":"2022-09-07T20:54:15","slug":"aspect-ratio","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/","title":{"rendered":"aspect-ratio"},"content":{"rendered":"\n<p>The CSS property <code>aspect-ratio<\/code> lets you create boxes that maintain proportional dimensions where the <code>height<\/code> and <code>width<\/code> of a box are calculated automatically as a ratio. It&#8217;s a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures a box stays in that proportion.<\/p>\n\n\n\n<p>In other words, this property helps us to size elements consistently, so the ratio of an element stays the same as it grows or shrinks.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  aspect-ratio: 2 \/ 1; \/* &#x2194;&#xfe0f; is double the &#x2195;&#xfe0f; *\/\n}\n\n.element {\n  aspect-ratio: 1 \/ 1; \/* &#x23f9; a perfect square *\/\n}<\/code><\/pre>\n\n\n\n<p><code>aspect-ratio<\/code> is defined in the <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-sizing-4//#aspect-ratio\" rel=\"noopener\">CSS Box Sizing Module Level 4 specification<\/a>, which is currently in Working Draft. That means it&#8217;s still in progress and has a chance of changing. But with Chrome and Firefox supporting it behind an experimental flag, and Safari Technology Preview <a href=https://css-tricks.com/"https:////webkit.org//blog//11439//release-notes-for-safari-technology-preview-118///" rel=\"noopener\">adding support for it in early 2021<\/a>, there are strong signals that <code>aspect-ratio<\/code> is gaining a lot of momentum.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">aspect-ratio: auto || &lt;ratio>;<\/code><\/pre>\n\n\n\n<p>In plain English: <code>aspect-ratio<\/code> is either assumed to be <code>auto<\/code> by default, or accepts a <code>&lt;ratio&gt;<\/code> as a value where <code>&lt;width \/ height&gt;<\/code>.<\/p>\n\n\n\n<ul class=\"ticss-f33ad05a\"><li><strong>Initial value:<\/strong> <code>auto<\/code><\/li><li><strong>Applies to:<\/strong> all elements except inline boxes and internal ruby or table boxes<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Percentages:<\/strong> n\/a<\/li><li><strong>Computed value:<\/strong> specified keyword or a pair of numbers<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n\n<p class=\"is-style-explanation\"><a href=https://css-tricks.com/"https:////webkit.org//blog//13148//release-notes-for-safari-technology-preview-153///" rel=\"noopener\">Safari Technology Preview 153<\/a> shipped on September 7, 2022. In the release, the initital value of <code>aspect-ratio<\/code> replaces <code>auto<\/code> with <code>default<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\naspect-ratio: auto; \/* default *\/\n\n\/* Ratio values *\/\naspect-ratio: 1 \/ 1; \/* width and height are equal proportion *\/\naspect-ratio: 2 \/ 1; \/* width is twice the height*\/\naspect-ratio: 1 \/ 2; \/* width is half the height *\/\naspect-ratio: 16 \/ 9  \/* typical video aspect ratio *\/\naspect-ratio: auto 4 \/ 3; \/* width:height, unless it's a replaced element *\/\naspect-ratio: 0.5; \/* float value *\/\n\n\/* Global values *\/\naspect-ratio: inherit;\naspect-ratio: initial;\naspect-ratio: unset;<\/code><\/pre>\n\n\n\n<ul><li><strong><code>auto<\/code>:<\/strong>&nbsp;The default value, which specifies that the element has no preferred aspect ratio and should size itself as it normally would. Therefore, replaced elements, like images with an intrinsic aspect ratio, use&nbsp;<em>that<\/em>&nbsp;aspect ratio.<\/li><li><strong><code>&lt;ratio&gt;<\/code>:<\/strong>&nbsp;Two positive numeric values separated by a forward slash&nbsp;(<code>\/<\/code>)&nbsp;with or without space around them, targeting the width and height of the element. In the case of a single value, the second value is considered to be&nbsp;1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by&nbsp;<code>box-sizing<\/code>.<\/li><li><strong><code>initial<\/code>:<\/strong>&nbsp;Applies the property\u2019s default setting, which is <code>auto<\/code>.<\/li><li><strong><code>inherit<\/code>:<\/strong>&nbsp;Adopts the <code>aspect-ratio<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong>&nbsp;Removes the current aspect ratio from the element.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"it-can-take-two-values\">It can take two values<\/h3>\n\n\n<p>This property can take two values at the same time, one being <code>auto<\/code>, and the other a <code>&lt;ratio&gt;<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  aspect-ratio: auto 1 \/ 1;\n}<\/code><\/pre>\n\n\n\n<p>If both <code>auto<\/code> <em>and<\/em> a <code>&lt;ratio&gt;<\/code> are specified together, the preferred aspect ratio is the specified ratio of width divided by height, unless it is a replaced element with an intrinsic aspect ratio, in which case that aspect ratio is used instead.<\/p>\n\n\n\n<p>As you can see in the following demo, the same values are set for a&nbsp;div&nbsp;and an&nbsp;<code>&lt;img&gt;<\/code> (a replaced element), the div element is using the <code>&lt;ratio&gt;<\/code> and becomes a square, but the image follows its intrinsic aspect ratio. If you remove&nbsp;<code>auto<\/code>&nbsp;from the values, you can see that the image is forced to be a square:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWdRvMz\" src=https://css-tricks.com/"////codepen.io//anon//embed//NWdRvMz?height=450&amp;theme-id=1&amp;slug-hash=NWdRvMz&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWdRvMz\" title=\"CodePen Embed NWdRvMz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-works-on-replaced-and-non-replaced-content\">It works on replaced and non-replaced content<\/h3>\n\n\n<p>If you&#8217;re thinking, &#8220;Uhm, yeah, doesn&#8217;t the browser already do this for us on images?&#8221; the answer is: <strong>absolutely<\/strong>. Browsers do some fancy aspect ratio calculations on <strong>replaced content<\/strong> like images. So, if an image has, say, a width of 500px, the browser flexes its CSS layout algorithms to maintain the image&#8217;s <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-images-3//#intrinsic-aspect-ratio\" rel=\"noopener\"><em>intrinsic<\/em> or &#8220;natural&#8221; dimensions<\/a>. The <code>aspect-ratio<\/code> property can be used to effectively override those natural dimensions.<\/p>\n\n\n\n<p>But <strong>non-replaced content<\/strong> does not have a natural proportion. That&#8217;s most of the stuff we work with, like divs. Rather than try to maintain the element&#8217;s natural proportions, <code>aspect-ratio<\/code> sets a &#8220;preferred&#8221; sizing.<\/p>\n\n\n\n<p>Now, the spec currently notes that older CSS specifications, notably CSS 2.1, does not contain a clear distinction between replaced and non-replaced content. That means we could see some additional special cases added to the spec to help clarify them. For the time being, we&#8217;re seeing browsers rolling out support for setting preferred aspect ratios on replaced and non-replaced separately, where some of the browsers with early support behind an experimental flag might only support <code>aspect-ratio<\/code> for non-replaced content. Definitely worth keeping an eye on the <a href=https://css-tricks.com/"#browser-support\">browser support<\/a> as it evolves.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-works-on-its-own-without-specifying-a-width-or-height\">It works on its own without specifying a <code>width<\/code> or <code>height<\/code><\/h3>\n\n\n<p>So, yeah, we can simply drop it on an element like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  aspect-ratio: 16 \/ 9;\n}<\/code><\/pre>\n\n\n\n<p>&#8230;and the element&#8217;s default <code>width: auto<\/code> kicks in implicitly to set the element&#8217;s dimensions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1906\" height=\"2148\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//05//Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=1906%2C2148&amp;ssl=1\%22 alt=\"\" class=\"wp-image-311964\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?w=1906&amp;ssl=1 1906w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=266%2C300&amp;ssl=1 266w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=909%2C1024&amp;ssl=1 909w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=768%2C866&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=1363%2C1536&amp;ssl=1 1363w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=1817%2C2048&amp;ssl=1 1817w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=1000%2C1127&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><a href=https://css-tricks.com/"https:////codepen.io//chriscoyier//pen//rNOqdJd/" rel=\"noopener\">View live demo on CodePen<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-changes-when-width-or-height-are-on-the-same-element\">It changes when <code>width<\/code> or <code>height<\/code> are on the same element<\/h3>\n\n\n<p id=\"h-let-s\">Let&#8217;s say we have an element with a width of <code>300px<\/code> and an <code>aspect-ratio<\/code> of <code>3\/1<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  aspect-ratio: 3 \/ 1;\n  width: 300px;\n}<\/code><\/pre>\n\n\n\n<p>By nature, <code>aspect-ratio<\/code> wants to calculate the element&#8217;s dimensions on its own and will do so based on the context where it&#8217;s used. But with that <code>width<\/code> tossed in, it tells <code>aspect-ratio<\/code> to calculate the element&#8217;s aspect ratio box using <code>300px<\/code> as the width. As a result, it&#8217;s like we&#8217;ve just written:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  height: 100px;\n  width: 300px;\n}<\/code><\/pre>\n\n\n\n<p>This makes sense! Remember, when no <code>width<\/code> or <code>height<\/code> are specified, the browser assumes those are <code>auto<\/code> and goes from there. When we provide explicit <code>width<\/code> and <code>height<\/code> values, those are what get used.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-s-ignored-in-some-situations\">It&#8217;s ignored in some situations<\/h3>\n\n\n<p>This is where things get a little mind-bendy because there are cases where <code>aspect-ratio<\/code> is overlooked or it&#8217;s calculations are affected by other properties. That includes:<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-when-both-width-and-height-are-declared-on-the-element\">When both <code>width<\/code> and <code>height<\/code> are declared on the element<\/h4>\n\n\n<p>We just saw how declaring either <code>width<\/code> <em>or<\/em> <code>height<\/code> on and element will affect the calculation of <code>aspect-ratio<\/code>. But if the element already has <em>both<\/em> a <code>width<\/code> and <code>height<\/code>, those get used instead of <code>aspect-ratio<\/code>. It requires both properties to override <code>aspect-ratio<\/code>; setting either <code>height<\/code> <em>or<\/em> <code>width<\/code> alone will not break the element&#8217;s aspect ratio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//05//Screen-Shot-2020-05-25-at-12.24.35-PM.png?resize=659%2C371&amp;ssl=1\%22 alt=\"\" class=\"wp-image-311721\" width=\"659\" height=\"371\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-25-at-12.24.35-PM.png?w=1318&amp;ssl=1 1318w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-25-at-12.24.35-PM.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-25-at-12.24.35-PM.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-25-at-12.24.35-PM.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-25-at-12.24.35-PM.png?resize=1000%2C563&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><code>aspect-ratio<\/code> is ignored when both <code>width<\/code> and <code>height<\/code> are set on the same element.<\/figcaption><\/figure>\n\n\n\n<p>Makes senes, right? If using either <code>width<\/code> or <code>height<\/code> forces the <code>aspect-ratio<\/code> to use that value in the calculation, then it logically follows that using both would completely override <code>aspect-ratio<\/code> altogether since both values are already provided and set.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-when-content-breaks-out-of-the-ratio\">When content breaks out of the ratio<\/h4>\n\n\n<p>Simply put, if you have an element with an aspect ratio and the content is so long such that it forces the element to expand, then the element will expand. And if the element expands, its dimensions change and, thus, no more aspect ratio. This is why the spec says the property sets the &#8220;preferred&#8221; aspect ratio. It&#8217;s preferred, but not prescribed.<\/p>\n\n\n\n<p>Don&#8217;t like how that works? Setting <code>min-height: 0;<\/code> on the element will allow the content to overflow the preferred aspect ratio instead of expanding it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1906\" height=\"2148\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//05//Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=1906%2C2148&amp;ssl=1\%22 alt=\"\" class=\"wp-image-311968\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?w=1906&amp;ssl=1 1906w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=266%2C300&amp;ssl=1 266w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=909%2C1024&amp;ssl=1 909w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=768%2C866&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=1363%2C1536&amp;ssl=1 1363w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=1817%2C2048&amp;ssl=1 1817w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.29.28-AM.png?resize=1000%2C1127&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption><a href=https://css-tricks.com/"https:////codepen.io//chriscoyier//pen//YzyoodW/" rel=\"noopener\">View live demo on CodePen<\/a><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-when-it-loses-to-min-and-max-properties\">When it &#8220;loses&#8221; to <code>min-*<\/code> and <code>max-*<\/code> properties<\/h4>\n\n\n<p>We just sort of saw how that works, right? When content exceeds the dimensions of the box, the <code>aspect-ratio<\/code> is effectively gone because the box expands with the content. We can override that with <code>min-width: 0<\/code>.<\/p>\n\n\n\n<p>That&#8217;s because all of the <code>min-*<\/code> and <code>max-*<\/code> properties typically battle <code>width<\/code> and <code>height<\/code> for supremacy in the war over Box Model calculations. For example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  min-width: 500px; \/* &#x1f3c6; Winner! *\/\n  width: 100px;\n}<\/code><\/pre>\n\n\n\n<p>But:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  min-width: 500px;\n  width: 700px; \/* &#x1f3c6; Winner! *\/\n}<\/code><\/pre>\n\n\n\n<p>That&#8217;s because <code>min-width<\/code> is either preventing <code>width<\/code> from going below a specific value, or it is ignored because the <code>width<\/code> has set already set the element beyond the minimum width it needs to be. The same thing goes for <code>min-height<\/code>, <code>max-width<\/code>, and <code>max-height<\/code>.<\/p>\n\n\n\n<p>The point of all this: if we set both a <code>min-*<\/code> or <code>max-*<\/code> property on the same element as <code>aspect-ratio<\/code> <em>and<\/em> they &#8220;win&#8221; over <code>width<\/code> or <code>height<\/code>, then those will override <code>aspect-ratio<\/code>. Told you it was a little mind-bendy. &#x1f92f;<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"use-cases\">Use cases<\/h3>\n\n\n<p>Replaced elements like images or videos already have an intrinsic aspect ratio, therefore when they grow or shrink, they maintain their aspect ratio, but non-replaced elements don&#8217;t have that luxury and sometimes you need that behavior for them.<\/p>\n\n\n\n<p>Here are some examples where&nbsp;<code>aspect-ratio<\/code>&nbsp;becomes handy.<\/p>\n\n\n\n<details >\n  <summary>\n          Responsive iframes      <\/summary>\n  \n\n<p>A very common use case is when you want to embed an iframe for displaying a video from another site like YouTube. In this case if you set the width to 100% and you set a height, the video is going to be deformed.<br><\/p>\n\n\n\n<p>In order to have a responsive iframe that preserves its aspect ratio you can do as following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">iframe {\n  aspect-ratio: 16 \/ 9;\n  width: 100%;\n  height: auto;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRNVYww\" src=https://css-tricks.com/"////codepen.io//anon//embed//GRNVYww?height=450&amp;theme-id=1&amp;slug-hash=GRNVYww&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRNVYww\" title=\"CodePen Embed GRNVYww\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If the iframe has width and height attributes set like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;iframe src=\"https:\/\/example.com\" width=\"800\" height=\"600\">&lt;\/iframe><\/code><\/pre>\n\n\n\n<p>&#8230;then you can automatically set the <code>aspect-ratio<\/code> like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">iframe[width][height] {\n  aspect-ratio: attr(width) \/ attr(height);\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Hero images      <\/summary>\n  \n\n<p>Setting a background-image to an element doesn&#8217;t have any effect on the size of that element. So for creating a hero image, if the image is in the background, you need to set a height on the element and having a fixed height is not very responsive!<\/p>\n\n\n\n<p>Here you can use aspect-ratio property In order to have a hero that preserve the aspect ratio of its <code>background-image<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.hero {\n  aspect-ratio: 4 \/ 3;\n  background: url(background.png);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOLVQoO\" src=https://css-tricks.com/"////codepen.io//anon//embed//gOLVQoO?height=450&amp;theme-id=1&amp;slug-hash=gOLVQoO&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOLVQoO\" title=\"CodePen Embed gOLVQoO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Consistency in a grid layout      <\/summary>\n  \n\n<p>Imagine, In a flexbox or a grid layout with auto-fill mechanism, you may want items to stay square, but items width and height can shrink or grow based on their content or their parent\u2019s size and as a result it\u2019s most likely that items don\u2019t stay square.<\/p>\n\n\n\n<p>Setting&nbsp;<code>aspect-ratio<\/code>&nbsp;to&nbsp;<code>1 \/ 1<\/code>&nbsp;changes the height dynamically while your item\u2019s width scales:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n}\n\n.grid-item {\n  aspect-ratio: 1 \/ 1;\n}<\/code><\/pre>\n\n\n\n<p>In the following image gallery, since images have random sizes, the <code>aspect-ratio<\/code> property is used in order to keep their height consistent. Remove aspect-ratio on the item list and see the effect.<\/p>\n\n\n\n<p>Also, with using&nbsp;<a target=\"_blank\" href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//o//object-fit///" rel=\"noreferrer noopener\"><code>object-fit<\/code><\/a>, you can fit the images into the right dimensions.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYyoQbB\" src=https://css-tricks.com/"////codepen.io//anon//embed//vYyoQbB?height=650&amp;theme-id=1&amp;slug-hash=vYyoQbB&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYyoQbB\" title=\"CodePen Embed vYyoQbB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__aspect-ratio\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\">Data on support for the mdn-css__properties__aspect-ratio feature across the major browsers<\/p>\n\n<script src=https://css-tricks.com/"https:////cdn.jsdelivr.net//gh//ireade//caniuse-embed//public//caniuse-embed.min.js/"><\/script>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dealing-with-legacy-browser-support\">Dealing with legacy browser support<\/h4>\n\n\n<p>Before having this property one way of dealing with this issue was&nbsp;<a href=https://css-tricks.com/"https:////css-tricks.com//aspect-ratio-boxes///" target=\"_blank\" rel=\"noreferrer noopener\">padded-box technique<\/a>&nbsp;and now thanks to CSS&nbsp;<a href=https://css-tricks.com/"https:////css-tricks.com//how-supports-works///" target=\"_blank\" rel=\"noreferrer noopener\"><code>@supports<\/code><\/a>&nbsp;we can use that technique for older browsers.<\/p>\n\n\n\n<p>In the following example, the pseudo-element tactic is used to add fallback for aspect ratio property in older browsers:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  aspect-ratio: 1 \/ 1;\n}\n\n@supports not (aspect-ratio: 1 \/ 1) {\n  .element::before {\n    float: left;\n    padding-top: 100%;\n    content: \"\";\n  }\n\n  .element::after {\n    display: block;\n    content: \"\";\n    clear: both;\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-332875\">\n\n  <time datetime=\"2020-05-28\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 1, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//a-first-look-at-aspect-ratio///">\n      A First Look at `aspect-ratio`    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-332875\">\n\n  <time datetime=\"2021-01-08\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 8, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//aspect-ratio-is-going-to-deprecate-fitvids///">\n      `aspect-ratio` is going to deprecate FitVids    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-332875\">\n\n  <time datetime=\"2019-03-13\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 13, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//designing-an-aspect-ratio-unit-for-css///">\n      Designing An Aspect Ratio Unit For CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-332875\">\n\n  <time datetime=\"2017-06-08\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 9, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//aspect-ratio-boxes///">\n      Aspect Ratio Boxes    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-332875\">\n\n  <time datetime=\"2017-11-15\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 16, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//aspect-ratios-grid-items///">\n      Aspect Ratios for Grid Items    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-332875\">\n\n  <time datetime=\"2019-06-06\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 18, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing///">\n      What if we got aspect-ratio sized images by doing almost nothing?    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-332875\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//h//height///">\n      height    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//h//height///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { height: 500px; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//84da92f298e5b124d92fb581b82cfdf4?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-332875\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//max-height///">\n      max-height    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//max-height///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { max-height: 3rem; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//84da92f298e5b124d92fb581b82cfdf4?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-332875\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//max-width///">\n      max-width    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//max-width///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { max-width: 100%; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//84da92f298e5b124d92fb581b82cfdf4?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-332875\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 26, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//min-height///">\n      min-height    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//min-height///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { min-height: 100vh; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//84da92f298e5b124d92fb581b82cfdf4?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-332875\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jan 15, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//min-width///">\n      min-width    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//min-width///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { min-width: 300px; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//84da92f298e5b124d92fb581b82cfdf4?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-332875\">\n\n  <time datetime=\"2011-09-06\" title=\"Originally published Jan 20, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Mar 3, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//w//width///">\n      width    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//w//width///" class=\"almanac-example\">\n      <code class=\"language-css\">.elment { width: 50%; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//84da92f298e5b124d92fb581b82cfdf4?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//saracope///">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13712,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/332875"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=332875"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/332875\/revisions"}],"predecessor-version":[{"id":373206,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/332875\/revisions\/373206"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=332875"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=332875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}