Use object-fit property instead of container element

assets/_gallery.scss

@@ -8,6 +8,8 @@
 
 	a {
 		&.blur-on-hover {
+			overflow: hidden;
+
 			&:hover img {
 				filter: blur(5px);
 				transform: scale(120%);
@@ -18,10 +20,6 @@
 			}
 		}
 
-		img {
-			display: block;
-		}
-
 		p {
 			background: rgba($color-overlay, 0.9);
 			color: $color-overlay-text;
@@ -34,24 +32,9 @@
 	}
 
 	img {
-		&.landscape {
+		display: block;
-			height: 100%;
-			width: auto;
-		}
-
-		&.portrait {
-			height: auto;
-			width: 100%;
-		}
-	}
-
-	.image {
-		align-items: center;
-		display: flex;
 		height: 280px;
-		justify-content: center;
+		object-fit: cover;
-		max-height: 280px;
 		width: 280px;
-		overflow: hidden;
 	}
 }

assets/style.scss

@@ -158,33 +158,18 @@ nav {
 article {
 	display: flex;
 
-	& > .image {
-		display: none;
-
-		& > img {
-			height: auto;
-			width: 100%;
-		}
-
-		@media screen and (min-width: $small) {
-			display: block;
-		}
-	}
-
 	&.preview {
 		margin-bottom: 3rem;
 
-		& > .image {
+		& > img {
-			align-items: center;
+			display: none;
 			height: 200px;
-			justify-content: center;
-			min-width: 200px;
-			overflow: hidden;
 			margin-right: 1.5rem;
-			width: 200px;
+			min-width: 200px;
+			object-fit: cover;
 
 			@media screen and (min-width: $small) {
-				display: flex;
+				display: block;
 			}
 		}
 
@@ -195,9 +180,16 @@ article {
 
 	&.page {
 		& > .image {
+			display: none;
 			text-align: right;
 
+			& > img {
+				height: auto;
+				width: 100%;
+			}
+
 			@media screen and (min-width: $small) {
+				display: block;
 				padding-left: 1.5em;
 				width: 60%;
 			}

layouts/galerie/section.html

@@ -5,7 +5,7 @@
 {{ range .Pages }}
 	<a class="blur-on-hover" href="{{ .RelPermalink }}">
 {{ with index (.Resources.ByType "image") 0 }}
-		<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
+		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>

layouts/galerie/single.html

@@ -3,7 +3,7 @@
 {{ .Content }}
 <section class="gallery">
 {{ range .Resources.ByType "image" }}
-	<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
+	<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 </section>
 {{ end }}

layouts/index.html

@@ -6,7 +6,7 @@
 <p class="date">{{ .Date | dateFormat "Mon, 02. January 2006" }}</p>
 <article class="preview">
 {{ with .Resources.GetMatch "image.jpg" }}
-	<section class="image"><img alt="{{ .Title }}" src="{{ .RelPermalink }}"></section>
+	<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 	<section class="text">
 		<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
@@ -31,7 +31,7 @@
 {{ range first 4 (.Site.GetPage "/galerie").Pages }}
 	<a class="blur-on-hover" href="{{ .RelPermalink }}">
 {{ with index (.Resources.ByType "image") 0 }}
-		<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
+		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>