optically-size-images
Version:
Normalize the size of a group of images, optically, based on their aspect ratios
253 lines (251 loc) • 7.14 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Optically size images</title>
<script type="module" crossorigin src="/vanilla/index.html.js"></script>
<link rel="modulepreload" crossorigin href="/modulepreload-polyfill.js">
<link rel="modulepreload" crossorigin href="/lib/index.js">
<link rel="stylesheet" crossorigin href="/css/index.css">
</head>
<body>
<p><a href="/">React example</a></p>
<p><a href="/vanilla">Vanilla example</a></p>
<div class="optically-size-images">
<figure>
<img
src="https://images.squarespace-cdn.com/content/v1/5ede2122e582b96630a4a73e/1609427144088-J6QCD34P67Y6GLUJ10HH/MTV-Logo-2021.jpg?format=2500w"
alt=""
/>
</figure>
<figure>
<img
src="https://1000logos.net/wp-content/uploads/2017/05/Rolex-logo.png"
alt=""
/>
</figure>
<figure>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk4f-mRJPxI2q_lmLlHQu-Sgw0aLD4gmvHzg&usqp=CAU"
alt=""
/>
</figure>
<figure>
<img
src="https://images.squarespace-cdn.com/content/v1/5ede2122e582b96630a4a73e/1609426275896-1FOTSNA4G3UL4V05UONK/koa-logo+2021.png?format=750w"
alt=""
/>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/d/de/Logo_Barron%27s.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/d/db/Forbes_logo.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://mlt.org/wp-content/uploads/2021/06/the-wall-street-journal-logo-png-8-300x174.png"
alt=""
/>
</figure>
<figure>
<img
src="https://www.nlpschool.com/wp-content/uploads/2015/07/financial-times.png"
alt=""
/>
</figure>
<figure>
<img
src="https://globalenergymonitor.org/wp-content/uploads/2020/12/ebff3737573f1b7635f3324be5c61f8f.png"
alt=""
/>
</figure>
<figure>
<img src="/test/600.png" alt="" />
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/microsoft.svg"
alt=""
/>
</figure>
<figure>
<img src="https://cdn.worldvectorlogo.com/logos/nba-6.svg" alt="" />
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/messenger.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/e/e3/CNBC_logo.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/airbnb.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://summitry.com/wp-content/themes/summitry/img/temp/logo.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/7/70/Allure_logo.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/arduino.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/discord.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/american-express-logo.png"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/asana.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Reuters_Logo.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Ford_logo_flat.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://placewise.imgix.net/images/api/retailhubjs/e3a3f05c1cd1b25e3374b3cd8f88fb8c.png"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/nestjs.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/medium.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/google-play.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/css-3.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/cssnext.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/google.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/internetexplorer.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/android-vertical.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/github.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/gatsby.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/datocms.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/bitbucket.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/behance.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/gilbarbara/logos/main/logos/beats.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/shgysk8zer0/logos/master/gulp.svg"
alt=""
/>
</figure>
<figure>
<img
src="https://raw.githubusercontent.com/shgysk8zer0/logos/master/sass.svg"
alt=""
/>
</figure>
</div>
</body>
</html>