fix size of img1

index.html

@@ -41,7 +41,7 @@
   <script defer src="./static/js/fontawesome.all.min.js"></script>
   <script src="./static/js/bulma-carousel.min.js"></script>
   <script src="./static/js/bulma-slider.min.js"></script>
-  <script src="./static/js/index.js"></script>
+
 
   <!-- juxtapose -->
   <script src="static/js/juxtapose.js"></script>
@@ -404,7 +404,7 @@ <h2 class="title is-3">
               <br>
               <span class="big_text">&nbsp;</span>
               <br><br>
-              <div>
+              <div id="resize_image1">
                 <img src="static/jaxtapose_imgs/cake_kayboard_117/rec_img.png">
               </div>
               <!-- <img src="static/jaxtapose_imgs/cake_kayboard_117/rec_img.png"> -->
@@ -1159,4 +1159,5 @@ <h2 class="title is-four-fifths">
 </footer>
 
 </body>
+<script src="./static/js/index.js"></script>
 </html>

static/js/index.js

@@ -174,20 +174,26 @@ $(document).ready(function() {
     bulmaSlider.attach();
 
 })
+function changeSize(){
+  const height= $('#resize_image1').height()
+  const width= $('#resize_image1').width()
+  $('#row_1_cake').height(height)
+  $('#row_1_cake').width(width)
+  $('#row_1_keyboard').height(height)
+  $('#row_1_keyboard').width(width)
+}
+changeSize()
+ window.addEventListener('resize', function(event) {
+      changeSize()
+      if(height/width>1.5){
+        window.location.reload()
+      }
+}, false);
 
-
-// window.addEventListener('resize', function(event) {
-//   // ...
+// $(window).resize(function() {
+//   //resize just happened, pixels changed
 //   console.log("window resize")
-
-//   // location.reload();
-
-// }, true);
-
-$(window).resize(function() {
-  //resize just happened, pixels changed
-  console.log("window resize")
-  location.reload();
-});
+//   location.reload();
+// });