fix amp img ratio error

Author: madawei2699

themes/hugo-coder/layouts/dev/single.amp.html

@@ -23,7 +23,7 @@ <h1>{{ .Title }}</h1>
       <div>
         {{ $PATTERN_EMPTY_ALT := "<img src=\"([^\"]+)\" alt=\"([^\"]+)\">" }}
         {{ $PATTERN_ALT := "<img src=\"([^\"]+)\" alt=\"\">" }}
-        {{ $REPLACEMENT := "<amp-img src=\"$1\" alt=\"$2\" layout=\"responsive\" width=\"266\" height=\"150\"></amp-img>" }}
+        {{ $REPLACEMENT := "<div class=\"fixed-container\"><amp-img class=\"contain\" src=\"$1\" alt=\"$2\" layout=\"fill\"></amp-img></div>" }}
         {{ $outContent := .Content | replaceRE $PATTERN_EMPTY_ALT $REPLACEMENT | replaceRE $PATTERN_ALT $REPLACEMENT | safeHTML }}
         {{ $outContent }}
       </div>

themes/hugo-coder/layouts/money/single.amp.html

@@ -23,7 +23,7 @@ <h1>{{ .Title }}</h1>
       <div>
         {{ $PATTERN_EMPTY_ALT := "<img src=\"([^\"]+)\" alt=\"([^\"]+)\">" }}
         {{ $PATTERN_ALT := "<img src=\"([^\"]+)\" alt=\"\">" }}
-        {{ $REPLACEMENT := "<amp-img src=\"$1\" alt=\"$2\" layout=\"responsive\" width=\"266\" height=\"150\"></amp-img>" }}
+        {{ $REPLACEMENT := "<div class=\"fixed-container\"><amp-img class=\"contain\" src=\"$1\" alt=\"$2\" layout=\"fill\"></amp-img></div>" }}
         {{ $outContent := .Content | replaceRE $PATTERN_EMPTY_ALT $REPLACEMENT | replaceRE $PATTERN_ALT $REPLACEMENT | safeHTML }}
         {{ $outContent }}
       </div>

themes/hugo-coder/layouts/partials/stylesheet.html

@@ -122,3 +122,18 @@
 a{padding:0;color:#ff1d55}.boxes .box p{color:dimgray;font-size:12px;margin:7.5px 0}@media (max-width:900px){.boxes
 .box{-ms-flex-preferred-size:45%;flex-basis:45%}}@media (max-width:500px){.boxes
 .box{-ms-flex-preferred-size:100%;flex-basis:100%}}
+
+.fixed-container {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  margin: auto;
+}
+
+amp-img.contain img {
+  object-fit: contain;
+}
+
+.footnotes {
+  overflow-wrap: break-word;
+}

themes/hugo-coder/layouts/partials/stylesheet.regular.html

@@ -1 +1 @@
-<!-- inject your link rel stylesheet here !-->
+<!-- inject your link rel stylesheet here !-->

themes/hugo-coder/layouts/self/single.amp.html

@@ -23,7 +23,7 @@ <h1>{{ .Title }}</h1>
       <div>
         {{ $PATTERN_EMPTY_ALT := "<img src=\"([^\"]+)\" alt=\"([^\"]+)\">" }}
         {{ $PATTERN_ALT := "<img src=\"([^\"]+)\" alt=\"\">" }}
-        {{ $REPLACEMENT := "<amp-img src=\"$1\" alt=\"$2\" layout=\"responsive\" width=\"266\" height=\"150\"></amp-img>" }}
+        {{ $REPLACEMENT := "<div class=\"fixed-container\"><amp-img class=\"contain\" src=\"$1\" alt=\"$2\" layout=\"fill\"></amp-img></div>" }}
         {{ $outContent := .Content | replaceRE $PATTERN_EMPTY_ALT $REPLACEMENT | replaceRE $PATTERN_ALT $REPLACEMENT | safeHTML }}
         {{ $outContent }}
       </div>