我试图用图像填充一个 div 并调整图像的大小以恰好适合它们的位置。问题是当未加载图像时,无法从元素中采样尺寸 x 、 y 。这就是我在查找有关堆栈溢出的一些示例后尝试做的事情。它不起作用...
$.each(data.data.children, function(i,item){
// Some images come in with a busted link. Hence the IF statement...
if (item.data.url.indexOf(".jpg")>0){
var imgTitle = item.data.title;
imgTitle = imgTitle;
$('<div id="c'+i+'"></div>').attr("class", "imgDiv").appendTo("#photos");
$("<img/>").attr("src", item.data.url).attr("id", "pic"+i).attr("class", "pics").appendTo("#c"+i);
.load(function(){
$(this).fadein("slow");
if (iWidth>iHeight){
$('#pic'+i).width(270);
$('#pic'+i).height(parseInt(270-imgTitle.length/3));
}
});
$("<p>"+imgTitle+"</p>").attr("id", "p"+i).appendTo("#c"+i);
$("<img/>").attr("src", "images/RedX2.png").attr("class", "xit").appendTo("#c"+i);
var mImg = $('#pic'+i)[0];
}
});
或者,有没有办法按比例对填充空间内的图像进行比例拟合?
TIA
黑暗
最佳答案
您可能根本不需要任何 javascript。有关使用 CSS 使图像自动调整大小以适应包含它的 div 的方法,请参阅这篇文章。
关于javascript - 每个图像加载后触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26262502/