在 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 中运行良好
但是使用 Chrome 就一团糟
我假设通过改变宽度,高度会像在 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/