Passen Sie die Ränder abhängig von der Fenstergröße des Browsers an.

Question

Ich habe eine Reihe von Bildern in horizontaler Scroll-Anordnung. Es gibt einen Rand zwischen den Bildern. Ich verwende ein jQuery-Skript, das die Größe der Bilder abhängig von der Fenstergröße des Browsers berücksichtigt. Meine Frage ist, wie kann ich den Rand zwischen den Bildern auch justieren?

Ich brauche das Design, um völlig flüssig zu sein, so dass Medienabfragen in diesem Fall keine Lösung sind.

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(); 

}); 

Vielen Dank im Voraus

Answer 1

wenn Sie MediaQ nicht verwenden möchten Sie Prozentsatz als margin-right:2% nutzen könnten. dass 2% das Fenster auf Ändern der Größe abhängt (es wird immer kleiner als das Fenster kleiner wird)

hier sehen jsfiddle width percentage

Code:

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

OR könnten Sie vw verwenden, welche Darstellungsmittel (Fenster) Breite. wo 100vw ist max und 0vw min. also wieder, dass margin-right:2vw wird abhängig von der Breite des Fensters erhöhen oder verringern.

siehe hier jsfiddle with vw

Code:

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

Lassen Sie mich wissen, wenn eine dieser zwei Lösungen für Sie gearbeitet.

PS: ich, dass width und height zum .slide zum Beispiel zwecken haben nur

Answer 2

Verwenden Medien abfragt

/*========== 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) { 

}