JavaScript导致响应式CSS出现问题

Question

我已经在网站上工作了一段时间，我有一个页面，该页面在大多数情况下可以完全使用css Grid进行响应，但是我确实遇到了一组图像问题，这些图像应用了javascript，并在这些图像中循环一次。 仅当网站在最小的1列范围内并且正在应用javascript时，网格区域才会在视口外出血，而调整大小才能正确地应用于其他所有内容。 其他人有这个问题或类似的东西吗？

https://jsfiddle.net/2svyua4q/

<title>Katie's House - West Hull Based Childminder</title>
<link rel="ICON" href="images/KH_logo.ico" type="image/ico" />
<meta name="description" content="">
<meta name="author" content="Brian Johnson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="KHjscript.js"></script>
<link rel="stylesheet" href="style-grid.css">
<link rel="stylesheet" href="kHstyle.css">

跳到内容</a>->

<header class="masthead">
  <ul class="contact">
    <li class="nav">
      <a href="https://www.facebook.com/KatieSummersChildminder/" target="_blank">
        <img border="0" alt="Contact us on Facebook" src="images/fBook_Icon_Black.gif" width="30" height="30"></a>
    </li>
    <li class="nav">
      <a href="mailto:katiesummers789@gmail.com">
        <img border="0" alt="Contact via Email" src="images/email_Icon_Black.gif" width="30" height="30"></a>
    </li>
    <li class="field">
      <input type="text" title="Search" text="Search" />
    </li>
  </ul>
  <div class="titlegrp">
    <img src="images/KH_logo.jpg" alt="Katies House Logo">
    <img class="title iresize" src="images/kH_title.png" alt="Katies House Title">
  </div>
</header>
<!-- .masthead -->

<main id="content" class="main-area">
  <section class="">
    <div class="subtitle"><u>Example of a day at Katie's house.</u></div>
    <div id="myGallery">
      <img border="1" src="images/Activity_1.gif" class="active iresize" />
      <img border="1" src="images/Activity_2.gif" class="iresize" />
      <img border="1" src="images/Activity_3.gif" class="iresize" />
    </div>
    <p>Our days may change if we have something different planned but a typical day during term time would look something like this.</p>
    <br>

    <table class="iresize">
      <tr>
        <th>Time</th>
        <th>Activity</th>
      </tr>
      <tr>
        <td>8:15 - 9:00</td>
        <td>
          <div class="tablecont">Children arrive.</div>
        </td>
      </tr>
      <tr>
        <td>9:00-11:30</td>
        <td>
          <div class="tablecont">Morning outing to playgroup/ park/ rhyme time/ soft play/ children's centre. Morning snack 10 am.</div>
        </td>
      </tr>
      <tr>
        <td>12:00-1:00</td>
        <td>
          <div class="tablecont">Lunch time (usually a hot cooked meal)</div>
        </td>
      </tr>
      <tr>
        <td>12:30-2:45</td>
        <td>
          <div class="tablecont">Child led play and some planned activities, naps for younger children, stories, rhymes etc... Children can choose from a range of indoor and outroor activities and resources.</div>
        </td>
      </tr>
      <tr>
        <td>2:45-3:15</td>
        <td>
          <div class="tablecont">Small after school snack at 3:30.</div>
        </td>
      </tr>
      <tr>
        <td>3:15-5:00</td>
        <td>
          <div class="tablecont">Afternoon tea (usually a lighter meal) at 4:30pm, child led play e.g. toys/craft/garden.</div>
        </td>
      </tr>
      <tr>
        <td>5:00-6:00</td>
        <td>
          <div class="tablecont">Quiet play/reading, tidy up time and parents picking up.</div>
        </td>
      </tr>
    </table>
    <div style="clear: both;"></div>
    <br>
  </section>

</main>

<aside class="sidebar">
  <div class="subtitle">
    <p><u>Site Navigation</u></p>
  </div>
  <div class="sidelinks">
    <a href="Index.html">Home</a>
    <br>
    <a href="About.html">About</a>
    <br>
    <a href="Sample_Day.html">Sample Day</a>
    <br>
    <a href="Gallery.html">Gallery</a>
    <br>
    <a href="Testimonials.html">Testimonials</a>
    <br>
    <a href="Enquiries.html">Enquiries</a>
    <br>
  </div>
</aside>
<!-- .sidebar -->

<footer class="footer-content">
  <p>Brian Johnson
    <br>&copy; Copyright 2016. All Rights Reserved</p>
</footer>

function swapImages() {
  var $current = $('#myGallery img:visible');
  var $next = $current.next();
  if($next.length === 0) {
    $next = $('#myGallery img:first');
  }
  $current.fadeOut('slow', 'linear');
  $next.fadeIn('slow', 'linear');
}

$(document).ready(function() {
  // Run our swapImages() function every 7 secs
  setInterval(swapImages, 10000);
});

@media screen
  and (min-width: 320px)
  and (max-width: 479px) {
    .site {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      grid-template-areas:
            "masthead"
            "sidebar"
            "main"
            "footer";
        grid-gap: 0.5em;
    }
.iresize {
max-width: 100%;
height: auto;
}

#myGallery {
position: relative;
width: 90%;
height: auto;
}

#myGallery img {
  display: none;
  position: relative;
  top: 0;
  left: 0;
    width: 90%;
    height: auto;
    }

#myGallery img.active {
  display: block;
    width: 90%;
    height: auto;
}

.iresize80 {
max-width: 80%;
height: auto;
}

.site {
    max-width: 50em;
    margin: 0 auto;
}

Answer 1

您的问题是“ myGallery”类的固定宽度和高度。

#myGallery {
  position: relative;
  width: 320px;
  /* Set your image width */
  height: 267px;
  /* Set your image height */
}

如果将它们设置为max-height和max-width，如下所示：

#myGallery {
    position:relative;
    max-width:100%;
    max-height:100%;
    height: auto;
    width:auto;
}

它应该适应移动桌面和移动