gpt4 book ai didi

javascript - CSS 图像换行问题 - 取决于浏览器缩放级别

转载 作者:行者123 更新时间:2023-11-30 06:39:14 25 4
gpt4 key购买 nike

我正在尝试在一个 DIV 中创建一个包含 5 个图像的面板,其中 jQuery animate() 连续扩展每个图像,直到所有 5 个图像占用其容器宽度的 100% 无包装

Here是问题的链接:

初始 blockUI 显示正常,但一旦它过期并显示正常页面,相同的五个图像将在某些分辨率下完美显示(我在 FF 或 IE 中使用 ctrl-+/- 来测试)和其他它导致的最后一张要换行的图片。

动画调整大小的代码如下,其目的是将每个图像的大小调整为容器宽度的 20%。我试图查看它是否与四舍五入有关并且结果是空的。我研究了 CSS 选项,尝试了以下部分/所有内容:

overflow:hidden;
white-space: nowrap;
display:inline-block;


$(".service_img").each(function (i)
{
// if the image in question's width is > 20% of its container then re-adjust it to be 20% so it will fit
if($('#'+this.id).outerWidth() > Math.floor((($('#services_imgs_container').outerWidth()/5)))){
$('#'+this.id).width(Math.floor(($('#services_imgs_container').outerWidth()/5)));
}
else {
$('#'+this.id).animate({width:(Math.floor(($('#services_imgs_container').outerWidth()/5)))},{duration:500, queue:false});
//$('#'+this.id).animate({width:'19.2%'},{duration:500, queue:false});
$('#'+this.id).show();
}

})

最佳答案

可以在resize后写一个函数,查看#services_imgs_container是否是div.service_img:eq(0)高度的两倍。如果它每次将每个 .service_img 的大小减小一个像素,直到该语句不再为真。

像这样的

while($('#services_imgs_container').height() >= ($('.service_img:eq(0)').height() * 1.5))
{
$('.service_img').css('width': '-=1');
}

关于javascript - CSS 图像换行问题 - 取决于浏览器缩放级别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12737473/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com