Is there a way to eliminate the white space that appears when mixing landscape and portrait images? I want the images to move up and fill the space, even if they don't align perfectly.
Additionally, I would like the images to resize based on the scale of the browser window.
Here is the HTML code:
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
foreach ($img as $image) {
echo "<img src='$image' class='imageCont'/>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
</html>
And here is the CSS:
.imageCont {
max-width: 200px;
margin: 1px;
transition: all 0.2s linear;
}
.imageCont:hover {
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
}