项目jQuery的图像调整大小
Posted
技术标签:
【中文标题】项目jQuery的图像调整大小【英文标题】：Image resize of items jQuery 【发布时间】：2013-02-07 01:42:22 【问题描述】：我已经设法自动适应每行画廊的图像，具体取决于它是水平的（每行一个图像）还是垂直的（每行两个图像）。
现在的问题是我希望图像可缩放（在窗口调整大小时调整大小），但我不知道如何实现它。我该怎么做？
这是我的代码：
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
);
【问题讨论】：
另一种选择是砌体，它非常适合重新定位元素以适应其空间...masonry.desandro.com 项目定位良好，这不是问题，问题是我想在窗口调整大小时调整图像的宽度和高度，无论如何，谢谢！ 不用担心 - 这是一个非常棒的图书馆，总是值得一提 :) （不，它不是我的 :p） 你能搞定它吗？我想我知道在这里做什么.. 【参考方案1】：对包含图像的容器使用百分比（对于它的宽度和高度）.. 然后也对图像的宽度和高度使用百分比（它不必是 100%，它必须是相对于其容器的百分比）
【讨论】：
【参考方案2】：这最好用 CSS 来解决。只需将 img 宽度设置为 100%，它就会随着其父级的大小扩展合同。在下面的示例中，.container 占据了 25% 的窗口，而 img 占据了 100%。你可以用firebug来改变容器的宽度，看看有什么区别。
<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的图像调整大小的主要内容，如果未能解决你的问题，请参考以下文章