Изменить размер изображения в ширину браузера

Question

В приложении MVC есть ряд изображений в верхней части страницы, прямо под NavBar

Генерируются из БД на основе предоставленного идентификатора, результирующий HTML-код выглядит так

<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>

Для определения размера в соответствии с шириной браузера есть этот 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");
        });

и изменить их размер при изменении ширины браузера, это

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

});

Это хорошо работает в IE11

Но с Chrome это беспорядок

Я предполагал, что при изменении ширины высота будет увеличиваться, как в IE11 ... Очевидно, нет: - (

Возможно, существует более простой метод с использованием CSS (я пробовал это, но не могу найти способ сохранить аспект), или jQuery неверен. Любые указатели будут оценены

Answer 1

сначала вы используете переменную для каждого изображения, где вы должны использовать классы, если размер всех изображений одинаковый

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

и для изменения размера ряда изображений вы можете сделать это

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})

и помните, что

$(window).width()

метод больше не работает, вы также можете попробовать заменить его на

 var Screenwidth = window.screen.availWidth

в вашем собственном коде

Answer 2

используйте медиа-запрос для установки ширины изображения, например, ниже

#TopImage_1 {
    width:100%;
}

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