From df1bd4612692dbf0d37e26022e19515ab1097b54 Mon Sep 17 00:00:00 2001
From: Thedro Neely <thedroneely@gmail.com>
Date: Thu, 22 Aug 2019 07:57:55 -0400
Subject: public/css: Prevent responsive image reflow

---
 app/views/index.view.php | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

(limited to 'app/views/index.view.php')

diff --git a/app/views/index.view.php b/app/views/index.view.php
index 7955fb7..f62a47d 100644
--- a/app/views/index.view.php
+++ b/app/views/index.view.php
@@ -23,13 +23,22 @@
                         In it for the long haul
                     </h2>
 
-                    <img data-image-zoom alt="Mountains" src="/images/mountains.jpg"
-                    width="<?php echo getimagesize(
-                        $_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg'
-                    )[0]; ?>"
-                    height="<?php echo getimagesize(
-                        $_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg'
-                    )[1]; ?>" >
+                    <?php
+                    $width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg')[0];
+                    $height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '/images/mountains.jpg')[1];
+                    $ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%';
+                    ?>
+
+                    <figure>
+                      <a href="/images/mountains.jpg" onclick="return false;">
+                        <div style="<?php echo 'padding-bottom:' . $ratio . ';'; ?>">
+                          <img data-image-zoom alt="Mountains" src="/images/mountains.jpg"
+                            width="<?php echo $width; ?>"
+                            height="<?php echo $height; ?>"
+                          >
+                        </div>
+                      </a>
+                    </figure>
 
                     <div class="content">
 
-- 
cgit v1.2.3