项目的图像大小调整的jQuery [英] Image resize of items jQuery
问题描述
我已成功地适应这取决于每行库的自动图像如果it's水平（每行一个图像）或垂直（每行两个图像）。
I have managed to fit automatically the images of the gallery per row depending if it´s horizontal (one image per row) or vertical (two images per row).
现在的问题是，我想要的图像可扩展性（调整的窗口大小调整），但我不知道如何去实现它。那应该怎么给我留下？
The problem now is that I want the images to be scalable (resize on window resize) but I have no idea how to achieve it. How it should me made?
这是我的code：
var gallery = new Gallery($('#gallery_images_inner'));
function Gallery(selector){
this.add_module = function(type, image){
var container = $('<div />' , {
'class' : 'gallery_container'
}).append(image);
if(type == 'horizontal'){
var h_ar = image.attr('height') / image.attr('width');
container.css({
'width' : selector.width(),
'height' : selector.width()*h_ar
})
}
if(type == 'vertical'){
container.css({
'width' : v_width,
'height' : v_height
})
}
container.appendTo(selector);
container.children('img').fitToBox();
}
var _this = this;
var gutter = 0;
// start vars for counting on vertical images
var v_counter = 0;
var w_pxls = 0;
var h_pxls = 0;
// iterates through images looking for verticals
selector.children('img').each(function(){
if($(this).attr('width') < $(this).attr('height')){
v_counter++;
h_pxls += $(this).attr('height');
w_pxls += $(this).attr('width');
}
})
// calculates average ar for vertical images (anything outside from aspect ratio will be croped)
var h_avrg = Math.floor(h_pxls/v_counter);
var w_avrg = Math.floor(w_pxls/v_counter);
var v_ar = h_avrg/w_avrg;
var v_width = (selector.width())/2;
var v_height = v_width*v_ar;
selector.children('img').each(function(){
if(parseInt($(this).attr('width')) > parseInt($(this).attr('height'))){
_this.add_module('horizontal', $(this));
}else{
_this.add_module('vertical', $(this));
}
})
selector.isotope({
masonry: {
columnWidth: selector.width() / 2
}
});
}
推荐答案
这将是更好的解决与CSS。刚刚成立的IMG宽度为100％，这将扩大与其父的大小合同。在下面.container的例子中占据了窗口的25％，在img占用的100％。可以使用萤火虫改变容器的宽度，看到了差异。
This would be better to solve with CSS. Just set the img width to 100% and it will expand contract with the size of its parent. In the example below .container takes up 25% of the window and the img takes up 100% of that. You can use firebug to change the width of the container and see the difference.
<DOCTYPE html>
<html>
<head>
<style>
.container {
width: 25%;
}
.container img {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="http://ldlocal.web44.net/test2/img/gallery0.jpg">
</div>
</body>
</html>
这篇关于项目的图像大小调整的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
