JanDW/aspect-ratio-layout.html

## aspect-ratio-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Queries Javascript</title>
<body>
  <main>
    <style>
  *,
  *::after,
  *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .wrapper {
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(var(--columns, 1), 1fr);
    gap: 1rem;
  }
</style>

<!-- landscape -->
<div class="wrapper">
  <img src="https://picsum.photos/400/270" alt="">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam culpa aliquid assumenda! Ea, rem inventore id cupiditate veritatis fugit ut nesciunt corporis, asperiores, similique hic! Sequi soluta labore dolorem ratione!</p>
</div>

<!-- portrait -->
<div class="wrapper">
  <img src="https://picsum.photos/270/400" alt="">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam culpa aliquid assumenda! Ea, rem inventore id cupiditate veritatis fugit ut nesciunt corporis, asperiores, similique hic! Sequi soluta labore dolorem ratione!</p>
</div>
  <script>
    const images = document.querySelectorAll('img');

    images.forEach((image) => {
      image.addEventListener('load', () => {
        const aspectRatio = getAspectRatio(image);

        if (aspectRatio < 1) {
          image
            .closest('.wrapper')
            .style
            .setProperty('--columns', 2);
        }
      });
    });

    function getAspectRatio(image) {
      return image.naturalWidth / image.naturalHeight;
    };
  </script>
  </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Container Queries Javascript</title>
	<body>
	<main>
	<style>
	*,
	*::after,
	*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	.wrapper {
	max-width: 600px;
	display: grid;
	grid-template-columns: repeat(var(--columns, 1), 1fr);
	gap: 1rem;
	}
	</style>

	<!-- landscape -->
	<div class="wrapper">
	<img src="https://picsum.photos/400/270" alt="">
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam culpa aliquid assumenda! Ea, rem inventore id cupiditate veritatis fugit ut nesciunt corporis, asperiores, similique hic! Sequi soluta labore dolorem ratione!</p>
	</div>

	<!-- portrait -->
	<div class="wrapper">
	<img src="https://picsum.photos/270/400" alt="">
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam culpa aliquid assumenda! Ea, rem inventore id cupiditate veritatis fugit ut nesciunt corporis, asperiores, similique hic! Sequi soluta labore dolorem ratione!</p>
	</div>
	<script>
	const images = document.querySelectorAll('img');

	images.forEach((image) => {
	image.addEventListener('load', () => {
	const aspectRatio = getAspectRatio(image);

	if (aspectRatio < 1) {
	image
	.closest('.wrapper')
	.style
	.setProperty('--columns', 2);
	}
	});
	});

	function getAspectRatio(image) {
	return image.naturalWidth / image.naturalHeight;
	};
	</script>
	</main>
	</body>
	</html>