我正在使用 jquery 调整大小效果(无 CSS)
我遇到的问题是调整大小在图像上工作正常,但我无法让它将两个图像放在同一行,就像设计一样。如果图像是水平的,则每行一个,但如果是垂直的,则应每行安排两个,并在两者上调整大小,知道如何实现这一点吗?
这是我的脚本:
$('.gallery_item').each(function(){
$('.gallery_img').each(function(){
var ww = $(window).width() - 60 - 230;
var wh = $(window).height() - 60;
var iar = $(this).attr('height') / $(this).attr('width');
var war = wh / ww;
if(iar <= war){
$(this).attr("width" , ww);
$(this).attr("height" , ww * iar);
}else{
$(this).attr("height" , wh);
$(this).attr("width" , wh / iar);
}
$('.gallery_item').css({
'width' : $(this).attr('width'),
'height' : $(this).attr('height'),
'padding-bottom' : 0
});
});
})
$(window).bind('resize' , function(){
$('.gallery_item').each(function(){
$('.gallery_img').each(function(){
var ww = $(window).width() - 60 - 230;
var wh = $(window).height() - 60;
var iar = $(this).attr('height') / $(this).attr('width');
var war = wh / ww;
if(iar <= war){
$(this).attr("width" , ww);
$(this).attr("height" , ww * iar);
}else{
$(this).attr("height" , wh);
$(this).attr("width" , wh / iar);
}
$('.gallery_item').css({
'width' : $(this).attr('width'),
'height' : $(this).attr('height'),
'padding-bottom' : 0
});
});
})
});
和我的标记:
<div class="gallery_item">
<img class="gallery_img" src="img/gallery0.jpg" alt="gallery0" width="850" height="567">
<img class="gallery_img vertical_img" src="img/gallery1.jpg" alt="gallery1" width="380" height="570">
<img class="gallery_img vertical_img" src="img/gallery2.jpg" alt="gallery2" width="382" height="570">
</div>
我尝试在 .vertical_img 上使用 float:left 但没有成功。
最佳答案
在 .vertical_img
上使用 display:inline;
应该将这两个图像放在同一行。但是,如果它们的组合宽度大于其容器的宽度,那么它们将出现在不同的行上。
您的容器 (div.gallery_item
) 只有 250 像素宽,这导致此功能无法正常工作。您的大图像实际上超出了该容器的边界。该容器的宽度需要为 outerWidth两个图像的组合(或更大)。
关于javascript - 适合包含两个图像的框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14998137/