JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="c-aspect-ratio--with-pseudo float-it">
  <img src="https://www.fillmurray.com/400/225" />
</div>

<p>
&lt;- This image uses a pseudo
</p>
<p>
Murray landed his first starring role with the film Meatballs in 1979. He followed this with a portrayal of Hunter S. Thompson in 1980's Where the Buffalo Roam. In the early 1980s, he starred in a string of box-office hits, including Caddyshack, Stripes, and Tootsie. Murray was the first guest on NBC's Late Night with David Letterman on February 1, 1982. He later appeared on the first episode of the Late Show with David Letterman on August 30, 1993, when the show moved to CBS. On January 31, 2012 – 30 years after his first appearance with Letterman – Murray appeared again on his talk show. He appeared as Letterman's final guest when the host retired on May 20, 2015.
</p>

<hr/>

<div class="c-aspect-ratio float-it">
  <img src="https://www.fillmurray.com/800/450" />
</div>

<p>
&lt;- This image doesn't use a pseudo
</p>
<p>
Murray landed his first starring role with the film Meatballs in 1979. He followed this with a portrayal of Hunter S. Thompson in 1980's Where the Buffalo Roam. In the early 1980s, he starred in a string of box-office hits, including Caddyshack, Stripes, and Tootsie. Murray was the first guest on NBC's Late Night with David Letterman on February 1, 1982. He later appeared on the first episode of the Late Show with David Letterman on August 30, 1993, when the show moved to CBS. On January 31, 2012 – 30 years after his first appearance with Letterman – Murray appeared again on his talk show. He appeared as Letterman's final guest when the host retired on May 20, 2015.
</p>

SCSS

.float-it {
  width: 25%;
  float: left;
  margin-right: 20px;
  clear: left;
}

.c-aspect-ratio {
  --width: 16;
	--height: 9;
	position: relative;
	padding-top: calc(var(--height) / var(--width) * 100%);
	background-size: cover;
  background-color: lightgrey; /* added for demonstration purposes only */
  
  > img {
    position: absolute;
    top: 0;
    width: 100%;
  }
}

.c-aspect-ratio--with-pseudo {
  --width: 16;
	--height: 9;
	position: relative;
	background-size: cover;
  background-color: lightgrey; /* added for demonstration purposes only */
  
  &:before {
    content: "";
    display: block;
	  padding-top: calc(var(--height) / var(--width) * 100%);
  }
  
  > img {
    position: absolute;
    top: 0;
    width: 100%;
  }
}

hr {
  clear: both;
  margin: 40px 0;
}