根據瀏覽器的窗口大小調整邊距

我有一系列滾動水平佈局的圖像。圖像之間有一段距離。我正在使用一個jQuery腳本，負責根據瀏覽器的窗口大小來調整圖像大小。我的問題是，我怎樣才能調整圖像之間的邊距呢？根據瀏覽器的窗口大小調整邊距

我需要的設計是完全流暢的，所以在這種情況下媒體查詢不是解決方案。

HTML：

<div id="page"> 
    <div id="header"> 
    </div> 
    <div id="slides"> 
     <div class="slide"><img src="image01.jpg" /></div> 
     <div class="slide"><img src="image02.jpg" /></div> 
     <div class="slide"><img src="image03.jpg" /></div> 
     .... 
     <div class="slide"><img src="imageN.jpg" /></div> 
    </div> 
    <div id="footer"> 
    </div> 
</div>

CSS：

#slides { 
    width: 100%; 
    white-space: nowrap; 
} 

.slide { 
    display: inline-block; 
    margin-right: 20px; 
    vertical-align: top; 
}

的jQuery：

jQuery(document).ready(function($){ 

    var $window = $(window), 
     $header = $('#header'), 
     $footer = $('#footer'); 

    var getHorizontalPageHeight = function() { 
     return $window.height() - $header.outerHeight() - $footer.outerHeight(); 
    }; 

    var $slides = $('#slides'), 
     $items = $slides.find('img, iframe'); 

    $items.each(function() { 
     var $item = $(this), 
      width = $item.data('width') || $item.attr('width') || 1, 
      height = $item.data('height') || $item.attr('height') || 1; 
     $item.data({ 
      height: height, 
      ratio: width/height 
     }); 
    }); 

    var resizer = function() { 

     var contentHeight = getHorizontalPageHeight(), 
      windowWidth = $window.width(), 
      windowHeight = $window.height(); 

     $items.each(function() { 

      var $item = $(this), 
       originalHeight = $item.data('height'), 
       height = contentHeight > originalHeight ? originalHeight : contentHeight, 
       width, 
       ratio = $item.data('ratio'); 

       width = height * ratio; 

       $item.css({ 
        width: width, 
        maxWidth: 'none', 
        height: width/ratio 
       }); 

     }); 

    }; 

    $window.on('resize', resizer); 
    resizer(); 

});

在此先感謝

來源

2016-07-29 user1991185

你的意思是這樣使用'@ media'查詢 –

嗨，怎麼樣讓一個固定的寬度和高度爲你圖片。示例這樣的事情。它會根據父div的尺寸自動調整大小。大多數開發者使用這種方法 –

使用CSS（@media） –

，如果你不希望使用MediaQ公司，你可以用百分比margin-right:2%。該2%取決於調整窗口大小（它會變得越來越小的窗口變小）

看到這裏jsfiddle width percentage

代碼：

.slide { 
display: inline-block; 
margin-right: 2%; 
vertical-align: top; 
height:100px; 
background:red; 
width:20% 
}

或者你可以使用vw這意味着視（窗口）寬度。其中100vw是最大值和0vw分。那麼margin-right:2vw將再次增加或減少，這取決於窗口的寬度。

看到這裏jsfiddle with vw

代碼：

.slide { 
display: inline-block; 
margin-right: 2vw; 
vertical-align: top; 
height:100px; 
background:red; 
width:20% 
}

讓我知道，如果這兩個解決方案之一爲你工作。

PS：我已經把那width和height到例如僅供參考

來源

2016-07-29 08:18:18

使用視口單位是一個不錯的解決方案，謝謝。雖然，在我的情況下，我將與vh單元一起使用，因爲我需要根據窗口的高度來增加或減少邊距。 – user1991185

使用媒體查詢

/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

}

來源

2016-07-29 07:59:33 vivek

根據瀏覽器的窗口大小調整邊距

回答

相關問題