Question

在MVC应用程序中，页面顶部有一排图像，就在NavBar下面

基于提供的ID从数据库生成，生成的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

使用媒体查询设置图像宽度，例如

#TopImage_1 {
    width:100%;
}

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

Answer 2

首先，如果所有图像的大小相同，则应为每个图像使用变量

<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

在您自己的代码中

将一行图像的大小调整为浏览器宽度

2 个答案: