我正在使用 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 ,但没有成功。