Improve Home Page Image

_includes/header.html

@@ -1,6 +1,16 @@
-<div class="col-lg-4 col-md-8 text-center mx-auto mt-4">
-  <img src="{{ site.author.image }}" alt="{{ site.title }}"class="img-fluid rounded-circle mb-3 wow animated zoomIn" data-wow-delay=".1s">
+<div class="col-lg-4 col-md-6 text-center mx-auto mt-4">
+
+  <!-- Fine Circle Responsive Image -->
+  <div id="container" class="my-2">
+    <div id="dummy"></div>
+    <div id="element">
+      <img src="{{ site.author.image }}" alt="{{ site.title }}" class="circle-image wow animated zoomIn" data-wow-delay=".1s">
+    </div>
+  </div>
+
   <p class="text-muted wow animated slideInUp" data-wow-delay=".25s">{{ site.description }}</p>
   <hr class="text-muted wow animated fadeIn" data-wow-delay=".40s">
+
   {% include social.html %}
+
 </div>

_sass/_base.scss

@@ -4,4 +4,32 @@ body {
 
 .badge {
     font-weight: 500;
+}
+
+// Fine Circle Responsive Image
+// Inspired by https://stackoverflow.com/a/6615994/10194811
+#container {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+}
+
+#dummy {
+    padding-top: 100%; /* 1:1 aspect ratio */
+}
+
+#element {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.circle-image {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center;
 }