Resize a row of images to browser width

Question

In an MVC app there is a row of images across the top of the page, just under the NavBar

The are generated from a DB based on the provided ID, the resultant HTML like this

<div id="imageHeader" class="row" style="padding-top:   30px; padding-left: 30px; ">
<div class="img-shadow" >
<img id="TopImage_1" title="The Park" alt="The park - taken in October" src="http://localhost:50675/Secure/ImageViewer/Index/3/Thumbnail" style="height: 140px"/>
</div>
<div class="img-shadow" >
<img id="TopImage_2" title="Picnic Table" alt="The Picnic Table in the Park - taken October 2010" src="http://localhost:50675/Secure/ImageViewer/Index/4/Thumbnail" style="height: 140px"/>
</div>
<div class="img-shadow" >
<img id="TopImage_3" title="The Park" alt="The Park - taken October" src="http://localhost:50675/Secure/ImageViewer/Index/5/Thumbnail" style="height: 140px"/>
</div>
<div class="img-shadow" >
<img id="TopImage_4" title="Hill Grade" alt="View from Hill Grade" src="http://localhost:50675/Secure/ImageViewer/Index/7/Thumbnail" style="height: 140px"/>
</div>
<div class="img-shadow" >
<img id="TopImage_5" title="Some Place" alt="Some place in the spring" src="http://localhost:50675/Secure/ImageViewer/Index/8/Thumbnail" style="height: 140px"/>
</div>
</div>

To size them according to the browser width there is this jQuery

 $('img').on('load', function () {
    var divWidth = $(window).width();
    var imagePadding = 175;
    var imageOneWidth = $('#TopImage_1').width();
    var imageTwoWidth = $('#TopImage_2').width();
    var imageThreeWidth = $('#TopImage_3').width();
    var imageFourWidth = $('#TopImage_4').width();
    var imageFiveWidth = $('#TopImage_5').width();
    var totalImageWidth = parseInt(imagePadding + imageOneWidth + imageTwoWidth + imageThreeWidth + imageFourWidth + imageFiveWidth);
    var widthDifference = divWidth - totalImageWidth;
    var percentDifference = Math.round(widthDifference / divWidth * 100);

    var imageOneHeight = $('#TopImage_1').height();
    var imageTwoHeight = $('#TopImage_2').height();
    var imageThreeHeight = $('#TopImage_3').height();
    var imageFourHeight = $('#TopImage_4').height();
    var imageFiveHeight = $('#TopImage_5').height();

    $('#TopImage_1').css('height', Math.round(imageOneHeight + (imageOneHeight / 100 * percentDifference)) + "px");
    $('#TopImage_2').css('height', Math.round(imageTwoHeight + (imageTwoHeight / 100 * percentDifference)) + "px");
    $('#TopImage_3').css('height', Math.round(imageThreeHeight + (imageThreeHeight / 100 * percentDifference)) + "px");
    $('#TopImage_4').css('height', Math.round(imageFourHeight + (imageFourHeight / 100 * percentDifference)) + "px");
    $('#TopImage_5').css('height', Math.round(imageFiveHeight + (imageFiveHeight / 100 * percentDifference)) + "px");
        });

and to resize them if the browser width changes, this

$(window).on('resize', function () {
    var divWidth = $(window).width();
    var imagePadding = 175;
    var imageOneWidth = $('#TopImage_1').width();
    var imageTwoWidth = $('#TopImage_2').width();
    var imageThreeWidth = $('#TopImage_3').width();
    var imageFourWidth = $('#TopImage_4').width();
    var imageFiveWidth = $('#TopImage_5').width();

    var totalImageWidth = parseInt(imagePadding + imageOneWidth + imageTwoWidth + imageThreeWidth + imageFourWidth + imageFiveWidth);
    var widthDifference = parseInt(divWidth - totalImageWidth);
    var percentDifference = Math.round(parseInt(widthDifference / divWidth * 100));

    var imageOneHeight = $('#TopImage_1').height();
    var imageTwoHeight = $('#TopImage_2').height();
    var imageThreeHeight = $('#TopImage_3').height();
    var imageFourHeight = $('#TopImage_4').height();
    var imageFiveHeight = $('#TopImage_5').height();

    $('#TopImage_1').css('height', Math.round(parseInt(imageOneHeight + (imageOneHeight / 100 * percentDifference))) + "px");
    $('#TopImage_2').css('height', Math.round(parseInt(imageTwoHeight + (imageTwoHeight / 100 * percentDifference))) + "px");
    $('#TopImage_3').css('height', Math.round(parseInt(imageThreeHeight + (imageThreeHeight / 100 * percentDifference))) + "px");
    $('#TopImage_4').css('height', Math.round(parseInt(imageFourHeight + (imageFourHeight / 100 * percentDifference))) + "px");
    $('#TopImage_5').css('height', Math.round(parseInt(imageFiveHeight + (imageFiveHeight / 100 * percentDifference))) + "px");

});

This works well in IE11

But with Chrome it's a mess

I was under the assumption that by changing the width that the height would scale up as it does in IE11... Clearly not :-(

It could be there is a way easier method using CSS (I have tried this, but can't find a way to maintain the aspect), or the jQuery is incorrect. Any pointers would be appreciated

Answer 1

firstly you are using variable for each image where you should use classes if size of all images is same

<img id="TopImage_1" class = 'MyImages'></img>
var imagesHeight = $('.MyImages').height();
var imagesWidth = $('.MyImages').width();

and for resizing of images row you can do this

var totalimages = 5
var Screenwidth = window.screen.availWidth
var ScreenHeight = window.screen.availHeight
var imagesHeight = ScreenHeight / 5
var imagesWidth = ScreenWidth / 5

$('.MyImages').css({'width':imagesWidth , 'height' : imagesHeight})

and remember that

$(window).width()

method does not work anymore , you can also try replacing it with

 var Screenwidth = window.screen.availWidth

in your own code

Answer 2

use media query to set image width e.g below

#TopImage_1 {
    width:100%;
}

@media only screen and (max-width: 600px) {
    #TopImage_1 {
        width:50%;
    }
}