Uniform img aspect ratio
Usage
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Uniform img aspect ratio</h2>
<div class="uniform_gallery">
<img src="img/bird.jpg" alt="bird">
<img src="img/wind.jpg" alt="wind">
<img src="img/jellyfish.jpg" alt="jellyfish">
<img src="img/mountain.jpg" alt="mountain">
<img src="img/fish.jpg" alt="fish">
<img src="img/facepalm.jpg" alt="facepalm">
</div>
</body>
</html>
]]>
<![CDATA[
/* style.css */
.uniform_gallery{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 1000px;
gap: 15px;
}
.uniform_gallery img{
max-width: 100%;
}
@media only screen and (max-width: 900px) {
.uniform_gallery{
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 600px) {
.uniform_gallery{
grid-template-columns: 1fr;
}
}
]]>
