Intrinsic sizing

In this example below you will see how to do a Intrinsic sizing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Dani Checa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Dani Checa ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Intrinsic sizing</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.</p>
<figure>
	<img src="http://csssecrets.io/images/adamcatlace.jpg" />
	<figcaption>
		The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
	</figcaption>
</figure>
<p>We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.</p>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/danichk/intrinsic-sizing-kkgEzo */
/**
 * Intrinsic sizing
 */

figure {
	max-width: 300px; /*Fallback */
	max-width: min-content;
	margin: auto;
  
  /* Basic styling */
  padding: 10px;
	border: 1px solid silver;
}

figure > img { max-width: inherit }

Comments