make image responsive

axherrm · Dec 19, 2023 · f753436 · f753436
1 parent a89320d
commit f753436
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 4 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,21 @@
 <main>
   <div #background style="width: 100vw; height: 100vh; display: flex; position: fixed; z-index: -100">
-    <img ngSrc="./assets/avatar.png" alt="Photo of Axel Herrmann" width="6000" height="3200"
-         style="min-width:100vw; min-height:100vh; width: auto; height: auto; object-fit: cover"
-    >
+<!--    <img-->
+<!--      srcset= "../assets/avatar_600.png 600w,-->
+<!--               ../assets/avatar_1000x533.png 1000w,-->
+<!--               ../assets/avatar_1500x800.png 1500w,-->
+<!--               ../assets/avatar_2000x1066.png 2000w,-->
+<!--               ../assets/avatar_2500x1333.png 2500w,-->
+<!--               ../assets/avatar_3000x1600.png 3000w,-->
+<!--               ../assets/avatar_6000x3200.png 6000w"-->
+<!--      sizes="100vw"-->
+<!--      src="../assets/avatar_600.png"-->
+<!--      alt=""-->
+<!--      style="min-width:100vw; min-height:100vh; width: auto; height: auto; object-fit: cover;"-->
+<!--    />-->
+    <img width="6000" height="3200"
+      ngSrc="assets/avatar" ngSrcset="600w, 1000w, 1500w, 2000w, 2500w, 3000w, 6000w"
+      alt="" style="min-width:100vw; min-height:100vh; width: auto; height: auto; object-fit: cover;"/>
   </div>
 
   <div #lang_selector style="right: calc(2vh + 64px); top: 2vh; position: fixed; z-index: 1000">

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -1,6 +1,15 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import {IMAGE_LOADER, ImageLoaderConfig} from "@angular/common";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideAnimations()]
+  providers: [
+    provideAnimations(),
+    {
+      provide: IMAGE_LOADER,
+      useValue: (config: ImageLoaderConfig) => {
+        return `${location.origin}/${config.src}_${config.width}.png`;
+      }
+    }
+  ]
 };
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
diff --git a/src/assets/avatar_1000.png b/src/assets/avatar_1000.png
diff --git a/src/assets/avatar_1500.png b/src/assets/avatar_1500.png
diff --git a/src/assets/avatar_2000.png b/src/assets/avatar_2000.png
diff --git a/src/assets/avatar_2500.png b/src/assets/avatar_2500.png
diff --git a/src/assets/avatar_3000.png b/src/assets/avatar_3000.png
diff --git a/src/assets/avatar_600.png b/src/assets/avatar_600.png
diff --git a/src/assets/avatar.png → src/assets/avatar_6000.png b/src/assets/avatar.png → src/assets/avatar_6000.png