Adjust margins depending on browser's window size

Question

I have a series of images in an scrolling horizontal layout. There's a margin between the images. I'm using a jQuery script that takes care of resizing the images depending on the browser's window size. My question is, how can I adjust the margin between the images, too?

I need the design to be totally fluid, so media queries are not a solution in this case.

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

});

Thanks in advance

Answer 1

if you don't want to use mediaQ you could use percentage as margin-right:2% . that 2% depends on resizing the window ( it will get smaller as the window gets smaller )

see here jsfiddle width percentage

code :

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

OR you could use vw which means viewport(window) width. where 100vw is max and 0vw min . so again, that margin-right:2vw will increase or decrease depending on the window's width.

see here jsfiddle with vw

code :

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

Let me know if one of these 2 solutions worked for you.

PS : i've put that width and height to the .slide for example purposes only