PROWAREtech
CSS: Format Images with Varying Aspect Ratios
Format images with varying aspect ratios to fit the same aspect ratio without stretching.
This example shows how to format images with varying aspect ratios to all fit a common aspect ratio without distorting or stretching the images. There are examples of common 1:1, 3:2 and 16:9 ratios being used but the images may be formatted to any ratio desired through the aspect-ratio property. See code for comments.
Related: Create Cards with a Horizontal Scroll and a Snap-to Feature.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Format Images with Varying Aspect Ratios</title>
<style>
.uniform-1x1-ratio {
display: flex;
flex-wrap: wrap;
}
.uniform-1x1-ratio > div { /* NOTE: this selects each "card" */
width: 100px;
}
.uniform-1x1-ratio > div > img {
display: inline;
inline-size: 100%; /* NOTE: this makes the image fit within its parent */
aspect-ratio: 1/1; /* NOTE: this sets the image aspect ratio and makes then uniform */
object-fit: cover; /* NOTE: without this the image will stretch and distort */
}
.uniform-3x2-ratio {
display: flex;
flex-wrap: wrap;
}
.uniform-3x2-ratio > div {
width: 135px;
}
.uniform-3x2-ratio > div > img {
display: inline;
inline-size: 100%;
aspect-ratio: 3/2;
object-fit: cover;
}
.uniform-16x9-ratio {
display: flex;
flex-wrap: wrap;
}
.uniform-16x9-ratio > div {
width: 160px;
margin: 5px; /* NOTE: add a little spacing to the cards */
}
.uniform-16x9-ratio > div > img {
display: inline;
inline-size: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
</style>
</head>
<body>
<p>NO FORMATTING</p>
<img src="https://picsum.photos/id/237/157/88" />
<img src="https://picsum.photos/id/718/118/118" />
<img src="https://picsum.photos/id/169/144/96" />
<img src="https://picsum.photos/id/1062/136/102" />
<img src="https://picsum.photos/id/1084/236/59" />
<p>1x1</p>
<div class="uniform-1x1-ratio">
<div> <!-- NOTE: must contain each image inside a DIV or other container with the width set -->
<img src="https://picsum.photos/id/237/157/88" />
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
</div>
</div>
<p>3x2</p>
<div class="uniform-3x2-ratio">
<div>
<img src="https://picsum.photos/id/237/157/88" />
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
</div>
</div>
<p>16x9 - with a little spacing</p>
<div class="uniform-16x9-ratio">
<div>
<img src="https://picsum.photos/id/237/157/88" />
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<img src="https://picsum.photos/id/718/118/118" />
<div>Quisquam temporibus repudiandae reprehenderit modi!</div>
</div>
<div>
<img src="https://picsum.photos/id/169/144/96" />
<div>Mollitia, nemo eos. Incidunt, laudantium?</div>
</div>
<div>
<img src="https://picsum.photos/id/1062/136/102" />
<div>Ab eum eaque fugiat ipsa?</div>
</div>
<div>
<img src="https://picsum.photos/id/1084/236/59" />
<div>Labore deserunt porro laboriosam. Quam?</div>
</div>
</div>
</body>
</html>
Comment
