jQuery - 在动态设置宽度的div中包含图像

Question

编辑2012年1月27日上午11:32 - 我相信我已修复与此脚本相关的所有问题。我需要将CSS类应用于每个我想要调整大小的图像，具体取决于我想将它左移，右移还是居中，但我可以忍受。请参阅我的最新解释和演示http://evanwebdesign.com/responsive-web-design/example5.html

编辑2012年1月27日上午10:50 - 此脚本仍存在问题。看到我的评论如下。解决问题。

编辑1/27/12上午9:00：我现在有这个问题差不多完成了。见我的例子在http://www.evanwebdesign.com/responsive-web-design/example3.html和我原来的例子

我目前有根据张贴在http://evanwebdesign.com/responsive-web-design/example.html浏览器窗口的宽度来调整响应图像的例子进行比较。

编辑12-1-16：我已经作出了更详细的例子（希望），使我的问题更容易在http://evanwebdesign.com/responsive-web-design/example2.html

理解，但假设我有我的＃内容专区内多张图片？假设它们都是不同的宽度？我不想手动计算宽度值，并为所有图像创建封闭的自定义类的div！

相反，我想写一个jQuery脚本，将做到以下几点：在＃内容股利

内

• 经过的所有图像获取每个图像的宽度（我知道我需要使用$（window）.load（），否则我会用图像值0结束）

• 以像素为单位取图像的宽度并将其除以900.（900是任意最大宽度pad后面的#content div的像素值已应用。）

• 将上一步创建的这个新数字作为百分比应用于图像周围新的包含div的宽度。

我们的目标是动态创建.home_photo格为＃内容专区内的每个图像。我不在乎CSS是否内联写入，因为标记永远不会出现在HTML中。

请让我知道这个问题是否清楚，或者如果有什么我可以做的更好地解释我自己。我知道这个问题涉及很多步骤。

在此先感谢大家的帮助！

Answer 1

我认为你可以用CSS这样做只是

<style> 
    .home_photo img 
    { 
     width:900px; 
    } 
</style> 

让我知道如果我误解smthing

编辑

我认为这将这样的伎俩

$(function(){ 
    $(window).resize(function(){ 
     $("#container img").each(function(){ 
     if($("#content").width() < $(this).width()) 
     { 
      $(this).width($("#content").width()); 
     } 
     }); 
    }); 
}); 

Answer 2

据我了解，你想包装每个图像的div将根据图像的原始大小相对于主#content div进行大小调整。

这应该做的伎俩：

$(document).ready(function() { 
    var contentWidth = $('#content').width(); 
    $("#container img").each(function(){ 
     var ratio = $(this).width()/contentWidth; 
     $(this).wrap("<div style='width:"+ratio+"'></div>"); 
}); 

你提到window.load - $（文件）。就绪是一个更好的版本，因为它执行DOM被加载后立即，而不是等待与jQuery使用为要加载的页面上的所有资源（包括图片）。