当我手动缩小浏览器时，如何让我的图像移动/缩小更多流畅？

Question

当我缩小浏览器时，我无法让我的图像流畅地缩小。包含文本和图像的两个右侧div在其他两个图像下突然移动。然后需要再多几个像素才能再次收缩到移动包装器视图中。如何让这种转变更加流畅？

jQuery.fn.cycle.defaults.carouselVisible = 3;
jQuery.fn.cycle.defaults.autoSelector = '.slideshow';


jQuery(document).ready(function() {
  // ^ This is an event, which triggers once all the document is loaded so that the manipulation is always guaranteed to run.

  jQuery("#toggle-deals-h4").click(function() {
    // ^ Attach a click event to our link
    jQuery("#toggle-deals-form").toggle();
    // ^ select the form and toggle its display

  });

  jQuery("#toggle-deals-h4 a").click(function() {
    // ^ Attach a click event to our link
    jQuery("#toggle-deals-form").hide("slow");
    // ^ select the form and toggle its display
  });

  jQuery("#hp-join-now-button").click(function() {
    // ^ Attach a click event to our link
    alert("Thanks! You have been added to the email list!");
    jQuery("#toggle-deals-form").hide("slow");
    // ^ select the form and toggle its display
  });
  jQuery("#toggle-contact-h4").click(function() {
    // ^ Attach a click event to our link
    jQuery("#toggle-contact-form").toggle();
    // ^ select the form and toggle its display

  });

  jQuery('#hp-form a').on('click', function(e) {
    e.preventDefault();
    jQuery('form').preventDoubleSubmission();
    jQuery("#toggle-contest-form").css("visibility: hidden");
    alert("Temporary submission confirmation");
  });

  // jQuery plugin to prevent double submission of forms
  jQuery.fn.preventDoubleSubmission = function() {
    jQuery(this).on('submit', function(e) {
      var $form = jQuery(this);

      if ($form.data('submitted') === true) {
        // Previously submitted - don't submit again
        e.preventDefault();
      } else {
        // Mark it so that the next submit can be ignored
        $form.data('submitted', true);
      }
    });

    // Keep chainability
    return this;
  };

});



function showHide() {
  document.getElementById("toggle-contest-form").style.display = "none";
  document.getElementById("toggle-already-entered").style.display = "block";

}
jQuery(".fancybox")
  .attr('rel', 'gallery')
  .fancybox({
    width: '854px',
    height: '480px',
    openEffect: 'none',
    closeEffect: 'none',
    nextEffect: 'none',
    prevEffect: 'none',
    padding: '0',
    fitToView: 'true',
    margin: [0, 0, 0, 0]
  });


jQuery(document).ready(function() {

  /* Using custom settings */
  if (!jQuery.browser.mobile) {
    jQuery('#video-button').attr('href', '#lightbox-product-video');
    layoutInitiateVideoLightbox('#video-      button');
  }

});

.stone-block {
  background-image:url({{media url="wysiwyg/Images/home/homesprite-1260.jpg"}});
  background-position: 0 0;
  margin: 10px;
}

.custom-block {
  background-image:url({{media url="wysiwyg/Images/home/homesprite-1260.jpg"}});
  background-position: -592px 0;
  margin: 10px;
}

.blog-block {
  background-image:url({{media url="wysiwyg/Images/home/homesprite-1260.jpg"}});
  background-position: 0 -280px;
  margin: 10px;
}

.warranty-block {
  background-image:url({{media url="wysiwyg/Images/home/homesprite-1260.jpg"}});
  background-position: -592px -280px;
  margin: 10px;
}

#categories {
  width: 48%;
  height: 279px;
  border-style: solid;
  border-width: 1px;
  border-color: #f2f2f2;
  float: left;
  text-decoration: none;
}

#quotes {
  width: 100%;
  float: left;
  margin: 10px 20px 20px 80px;
}

#rollover {
  color: #000 !important;
}

#rollover:link {
  color: #000 !important;
}

#rollover:visited {
  color: #000 !important;
}

#rollover:hover {
  color: #008ea3;
  text-decoration: none !important;
}

#rollover:active {
  color: #008ea3 !important;
}

#top-image {
  width: 100%;
  height: 400px;
  background: url('/media/wysiwyg/Images/product_education/home-header-     1260.jpg');
  background-repeat: no-repeat;
}

.bcFloat {
  display: none !important;
}

.slideshow {
  width: 100%;
  overflow: visible !important;
}

.hp-product-carousel {
  height: auto !important;
}

.carousel_container {
  width: 100%;
  overflow: hidden;
}

.carousel_item {
  width: 150px;
  height: 250px;
  margin: 10px;
  background: #FFF;
}

.hp-product-carousel .product-image img {
  width: 100%;
}

.cycle-carousel-wrap .carousel_item {
  white-space: normal;
}

input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  width: 80%;
  height: 30px;
  padding: 0 8px;
}

.main-container,
.footer-container {
  padding: 0;
}

.contest-hp {
  text-align: center;
  margin: 0 auto;
  background-color: #eee;
}

.contest-hp img {
  padding-bottom: 20px;
  width: 100%;
}

.contest-hp h2 {
  padding-top: 20px;
  color: #008ea3;
}

.contest-hp h3 {
  padding-top: 20px;
  color: #008ea3;
  opacity: 0.8;
  font-size: 16px;
}

.contest-hp h2,
.contest-hp h3 {
  margin: 0 auto;
  padding: 2% 5%;
  text-transform: none;
}

#hp-form {
  margin: 0 auto;
  width: 100%;
  padding: 2% 0;
}

#hp-form a {
  float: none;
  background-color: #008ea3;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 80%;
  margin: 10px 0;
}

.block-subscribe .input-box {
  float: left;
}



.hp-large-block a {
  display: block;
}

.hp-large-block a img {
  width: 100%;
}

.hp-large-form,
.hp-contact-form {
  text-align: center;
  margin: 20px 0;
}

#toggle-deals-form,
#toggle-contact-form {
  display: none;
}

.hp-large-form input {
  margin: 1% 0;
}


#hp-contact-form a {
  display: none;
}

@media (min-width: 771px) {
  #mobile-hp-wrapper {
    display: none;
  }
}

@media (max-width: 770px) {
  #desktop-hp-wrapper {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<div id="mobile-hp-wrapper">
  <div class="contest-hp">
    <img src="{{media url='wysiwyg/mobile/dn-nina-mobile.png'}}" alt="STUFF" />

    <div id="toggle-contest-form">

      <div id="hp-form">
        <div class="input-box">
          <input type="text" name="email" id="hp-form-email" placeholder="Email Address*" title="Enter To Win" class="input-text required-entry validate-email" />
          <a href="#hp-form" onClick="showHide();">ENTER CONTEST</a>
        </div>
      </div>
    </div>

    <div id="toggle-already-entered">
    </div>

  </div>
  <div class="hp-product-carousel">
    <div class="carousel_container">
      <div id="left-arrow"></div>
      <div id="right-arrow"></div>

      <div class="slideshow" data-cycle-fx="carousel" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-carousel-visible="2" data-cycle-fx=scrollHorz data-cycle-swipe=true data-cycle-next="#right-arrow" data-cycle-prev="#left-arrow" data-cycle-fx="carousel">

        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="First Love" class="product-image">
                        <div class="product-image">
                          <img src="#" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="F">F</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span      class="price">$5</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" class="product-image">
                        <div class="product-image">
                          <img src="#" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="A">A</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span class="price">$4</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="T" class="product-image">
                        <div class="product-image">
                          <img src="#" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="T">T</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span class="price">$7</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="A" class="product-image">
                        <div class="product-image">
                          <img src="#" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="A">A</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span class="price">$6</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="V" class="product-image">
                        <div class="product-image">
                          <img src="#" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="Valencia">Valencia</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span class="price">$9</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="F" class="product-image">
                        <div class="product-image">
                          <img src="#" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="French Quarter">F</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span class="price">$8</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>

        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="F" class="product-image">
                        <div class="product-image">
                          <img src="http://content.diamondnexus.com/media/catalog/product/cache/1/small_image/254x/9df78eab33525d08d6e5fb8d27136e95/f/i/fifth-avenue_t_1.jpg" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="F">F</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		            <span class="price">$8</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="carousel_item">
          <li class="item last" style="float: left; list-style: none; position: relative;">
            <div class="item-inner">
              <div class="box-item">
                <div class="products">
                  <article class="product">
                    <figure>
                      <a href="#" title="D" class="product-image">
                        <div class="product-image">
                          <img src="http://content.diamondnexus.com/media/catalog/product/cache/1/small_image/254x/9df78eab33525d08d6e5fb8d27136e95/d/i/diamond-diva-round_t_1_18.jpg" alt="">
                        </div>
                      </a>
                    </figure>
                  </article>
                </div>
              </div>
              <h2 class="product-name"><a href="#" title="Diamond Diva">Diva</a></h2>
              <div class="price-box">
                <div class="price-box">
                  <span id="product-price-2" class="regular-price">
		       <span class="price">$8</span>
                  </span>
                </div>
              </div>
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>

  <div class="hp-large-block">
    <a href="/ed/about-us">
      <img src="{{media url='wysiwyg/mobile/hp-inside-nexus-full.png'}}" alt="I" />
    </a>
  </div>

  <div class="hp-large-form">
    <h4 id="toggle-deals-h4">blah</h4>
    <form id="toggle-deals-form">
      <input type="text" name="first_name" placeholder="Name*" title="Deals" class="input-text required-entry" />
      <input type="text" name="last_name" placeholder="Last*" title="Deals" class="input-text required-entry" />
      <input type="text" name="email" placeholder="Email Address*" title="Deals And Offers" class="input-text required-entry validate-email" /> <br />
      <a id="hp-join-now-button" href="#deals-and-offers">JO</a>
    </form>
  </div>
  <div class="hp-contact-form">
    <h4 id="toggle-contact-h4">CONTAC</h4>
    <form id="toggle-contact-form">
      <a id="hp-contact-call" href="#" </a>
        <br />
        <h5 style="text-align: center; margin: 5%; font-size: 16px; font-weight: normal;">ad</h5>
    </form>
  </div>
</div>

<!-- start desktop HTML -->
<div id="desktop-hp-wrapper">

  <div id="top-image">
    <div style="width:40%; margin:65px 0 0 0; float:left;">
      <h2 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:40px; font-weight:normal; line-height:43px; color:#fff; max-width:560px; margin:0 0 0 60px; padding:0; text-transform:none;">bah</h2>
      <h3 style="font-family: 'Montserrat', Arial, sans-serif; font-size:18px; font-weight:normal; line-height:26px; color:#fff; margin:15px 0 0 60px; padding:0; text-transform:none;">T</h3>
      <a href="#" style="width:325px; background-color:#008ea3; margin:30px 0 25px 60px; padding:12px 5px; display:block; font-family: 'Montserrat', sans-serif; font-size:16px; font-weight:normal; color:#FFF; text-align:center; text-decoration:none;">E</a>
    </div>
    <a href="#">
      <div style="width: 45%; height:330px; margin-top:20px; float:left;"></div>
    </a>
    <div style="clear:both;"></div>
  </div>

  <div style="background-color:#fb687b; width:100%; margin: 5px auto;">
    <a href="/gifts/gifts-top-25-gifts"><img src="{{media url=" wysiwyg/mothers-day/MD-Sale-Banner.jpg "}}" width="1048" height="76" style="margin:0 auto;" alt="Top" /></a>
  </div>

  <div style="width:100%; margin:0 auto; padding:10px;">
    <a href="#" id="categories" class="stone-block">
      <div style="padding:40px 30px;">
        <h3 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:36px; line-height:38px; color:#000; margin:0; padding:0;">C</h3>
        <hr style="width:81px; background-color:#797979; margin-top:15px;" />
        <p style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:20px; color:#797979; margin-top:15px; padding:0;">A</p>
        <div style="margin:10px 0 5px 0; font-family: 'Montserrat', sans-serif; font-size:14px; color:#008ea3; text-decoration:none;">L</div>
      </div>
    </a>

    <a href="#" target="_blank" id="categories" class="custom-block">
      <div style="padding:40px 30px;">
        <h3 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:36px; line-height:38px; color:#000; margin:0; padding:0;">C</h3>
        <hr style="width:81px; background-color:#797979; margin-top:15px;" />
        <p style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:20px; color:#797979; margin-top:15px; padding:0;">L</p>
        <div style="margin:10px 0 5px 0; font-family: 'Montserrat', sans-serif; font-size:14px; color:#008ea3; text-decoration:none;">b</div>
      </div>
    </a>

    <a href="#" id="categories" class="blog-block">
      <div style="padding:40px 30px;">
        <h3 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:36px; line-height:38px; color:#000; margin:0; padding:0;">I</h3>
        <hr style="width:81px; background-color:#797979; margin-top:15px;" />
        <p style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:20px; color:#797979; margin-top:15px; padding:0;">n</p>
        <div style="margin:10px 0 5px 0; font-family: 'Montserrat', sans-serif; font-size:14px; color:#008ea3; text-decoration:none;">b</div>
      </div>
    </a>

    <a href="#" id="categories" class="warranty-block">
      <div style="padding:40px 30px;">
        <h3 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:36px; line-height:38px; color:#000; margin:0; padding:0;">E</h3>
        <hr style="width:81px; background-color:#797979; margin-top:15px;" />
        <p style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:20px; color:#797979; margin-top:15px; padding:0;">Bang</p>
        <div style="margin:10px 0 5px 0; font-family: 'Montserrat', sans-serif; font-size:14px; color:#008ea3; text-decoration:none;">blah</div>
      </div>
    </a>
    <div style="clear:both;"></div>
  </div>

  <div style="width:100%; margin:30px auto;">
    <h2 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:26px; color:#000; text-align:center; margin-bottom:0; padding-bottom:0;">head</h2>
    <div style="width:100%; margin:20px auto;">
      <div style="width:33%; float:left;">
        <img src="{{media url=" wysiwyg/Images/home/one.png "}}" width="66" height="66" style="float:left; margin-right:10px;" alt="One" />
        <h3 style="font-family:'Montserrat', Arial, sans-serif; font-size:20px; float:left; margin:0; padding:0; text-decoration:underline;"><a href="#" style="color:#000;">Worry</a></h3>
        <p style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:21px; color:#404040; float:left; margin:0; padding:0;">Blah</p>
      </div>
      <div style="width:33%; float:left;">
        <img src="{{media url=" wysiwyg/Images/home/two.png "}}" width="66" height="66" style="float:left; margin:0 10px 0 15px;" alt="Two" />
        <h3 style="font-family:'Montserrat', Arial, sans-serif; font-size:20px; color:#000; float:left; margin:0; padding:0; text-decoration:underline;"><a href="#" style="color:#000;">Blah</h3>
            <p style="width:235px; font-family: 'Montserrat', sans-serif; font-size:15px; line-height:21px; color:#404040; float:left; margin:0; padding:0;">Blah</p>
        </div>
        <div style="width:33%; float:left;">
        	<img src="{{media url="wysiwyg/Images/home/three.png"}}" width="66" height="66" style="float:left; margin-right:10px;" alt="Three" />
            <h3 style="font-family:'Montserrat', Arial, sans-serif; font-size:20px; color:#000; float:left; margin:0; padding:0; text-decoration:underline;"><a href="#" style="color:#000;" target="_blank">Blah</a> </h3>
        <p style="width:250px; font-family: 'Montserrat', sans-serif; font-size:15px; line-height:21px; color:#404040; float:left; margin:0; padding:0;">blah</p>
      </div>
    </div>
    <div style="clear:both;"></div>
  </div>

  <div style="width:100%; margin:60px auto;">
    <h2 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:26px; color:#000; text-align:center; margin-bottom:0; padding-bottom:25px;">

      <div style="width:70%; margin:0 auto;">
        <div style="width:39%; float:left;">
          <!-- ******************* Start video *******************-->
          <a class="fancybox fancybox.iframe" href="//#"><img src="{{media url=" wysiwyg/Images/home/video-testimonials2.jpg "}}" width="344" height="227" border="0" alt="blah" /></a>



          </br>
          <div class="clear"></div>

          <a href="#" target="_blank" style="margin:30px auto; padding:12px 10px; display:block; background-color:#008ea3; font-family: 'Montserrat', sans-serif; font-size:15px; color:#FFF; text-align:center; text-decoration:none;">blah</a>
        </div>
        <div style="width:45%; float:left; margin-left:5%;">
          <a href="//www.resellerratings.com/survey/detail/5108655" target="_blank" id="quotes">
            <img src="{{media url=" wysiwyg/Images/home/annabelle.jpg "}}" width="88" height="88" style="float:left; margin:8px 20px 0 0;" alt="Annabelle Engagement Ring" />
            <div style="width:280px; float:left;">
              <p id="rollover" style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:21px; margin:0; padding:0;">blah</p>
              <p id="rollover" style="font-family:'Montserrat', Arial, sans-serif; font-style:italic; font-weight:lighter; font-size:12px; margin-top:8px;">- Nancy</p>
            </div>
            <div style="clear:both;"></div>
          </a>
          <a href="#" target="_blank" id="quotes">
            <img src="{{media url=" wysiwyg/Images/home/ulyssa.jpg "}}" width="88" height="88" style="float:left; margin:3px 20px 0 0;" alt="" />
            <div style="width:280px; float:left;">
              <p id="rollover" style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:21px; margin:0; padding:0;">blah</p>
              <p id="rollover" style="font-family:'Montserrat', Arial, sans-serif; font-style:italic; font-weight:lighter; font-size:12px; margin-top:8px;">- Marisa</p>
            </div>
            <div style="clear:both;"></div>
          </a>
          <a href="//www.resellerratings.com/survey/detail/5114997" target="_blank" id="quotes">
            <img src="{{media url=" wysiwyg/Images/home/endlessdays.jpg "}}" width="88" height="88" style="float:left; margin:10px 20px 0 0;" alt="" />
            <div style="width:280px; float:left;">
              <p id="rollover" style="font-family: 'Montserrat', sans-serif; font-size:15px; line-height:21px; margin:0; padding:0;">blah </p>
              <p id="rollover" style="font-family:'Montserrat', Arial, sans-serif; font-style:italic; font-weight:lighter; font-size:12px; margin-top:8px;">- Emiliano</p>
            </div>
            <div style="clear:both;"></div>
          </a>
        </div>
        <div style="clear:both;"></div>
      </div>
  </div>


  <div style="width:98%; min-height:60px; margin:0 auto 20px auto; border-style:solid; border-width:5px; border-color:#000;">
    <div style="width:39%; float:left;">
      <h4 style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:33px; line-height:33px; color:#000; margin:8px 0 0 15px; padding:0;">blah
    </div>
    <div style="width:59%; float:left; margin-left:20px;">
      <p style="font-family:'Montserrat', Arial, sans-serif; font-weight:700; font-size:13px; line-height:16px; color:#000; margin:9px 0 0 0; padding:0;"><span style="font-family:'Montserrat', Arial, sans-serif; color:#008ea3; font-size:14px;"></span> <a href="#" target="_blank" style="font-family:'Montserrat', Arial, sans-serif; font-style:italic; text-decoration:underline; color:#000;">SEE TERMS</a></p>
    </div>
    <div style="clear:both;"></div>
  </div>

</div>