jquery - 将一行图像调整为浏览器宽度

标签 jquery css

在 MVC 应用程序中,页面顶部有一排图像,就在导航栏下方

这些是根据提供的 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 中运行良好

IE 11 - loaded

IE 11 - reduced

但是使用 Chrome 就一团糟

Chrome - loaded

Chrome - reduced

我假设通过改变宽度,高度会像在 IE11 中那样按比例增加......显然不是 :-(

可能有一种使用 CSS 的更简单的方法(我试过这个,但找不到维护方面的方法),或者 jQuery 不正确。任何指针将不胜感激

最佳答案

使用媒体查询来设置图像宽度,例如下面

#TopImage_1 {
    width:100%;
}

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

关于jquery - 将一行图像调整为浏览器宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50109449/

相关文章:

javascript - jquery 调整大小,使内容始终完美居中

javascript - 当另一个元素处于事件状态时更改元素的样式

jquery - 启用禁用的按键?

jquery - 我已经更改了我的 a :link color with jQuery. 现在我的 a:hover 不起作用

jquery - 设置 jQuery UI DataTable 行样式的简单方法?

html - Jumbotron 错误边距中的 Bootstrap 警报

javascript - Laravel Mix 和 Turbolinks

javascript - 从序列化字符串中获取值

javascript - 在html表中获取倒数第二个 child td

html - 右侧div没有填满右侧