jQuery将图像封装在一个div中，该div具有动态设置的宽度

Question

编辑12年1月27日上午11:32-我相信我已经修复了与此脚本相关的所有问题。我需要将一个CSS类应用于我想要调整大小的每个图像，这取决于我是想将其向左、向右浮动还是居中，但我可以接受这一点。查看我的最新解释和演示http://evanwebdesign.com/responsive-web-design/example5.html

编辑12年1月27日上午10:50-此脚本仍有问题。请参阅下面我的评论。正在进行修复

2012年1月27日上午9:00编辑：我现在几乎完成了这个问题。请参阅我的示例http://www.evanwebdesign.com/responsive-web-design/example3.html并与我最初的示例进行比较

我目前有一个响应图像的例子，它根据发布在http://evanwebdesign.com/responsive-web-design/example.html.

编辑1/16/12：我做了一个更详细的例子，（希望）能让我的问题更容易理解http://evanwebdesign.com/responsive-web-design/example2.html

但是假设我的#contentdiv中有多个图像？假设它们都是不同的宽度？我不想手动计算宽度值，也不想为我的所有图像创建带有自定义类的封闭div！

相反，我想写一个jQuery脚本，它将执行以下操作：

• 浏览#contentdiv 中的所有图像

• 获取每个图像的宽度（我意识到我需要使用$（window）.load（），否则我将得到图像值0）

• 取图像的宽度（以像素为单位），然后将其除以900。（900是应用填充之后#content-div的任意最大宽度像素值。）

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

目标是为#contentdiv中的每个图像动态创建.home_photodiv。我不在乎CSS是否以内联方式编写，因为标记永远不会出现在HTML中。

请告诉我这个问题是否清楚，或者我是否还能做些什么来更好地解释自己。我知道这个问题涉及很多步骤。

提前感谢大家的帮助！

Answer 1

据我所知，您希望将每个图像包装在一个div中，该div的大小将基于图像相对于主#contentdiv的本地大小。

这应该会奏效：

$(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-$（document）.ready是与jQuery一起使用的更好版本，因为它在加载DOM后立即执行，而不是等待页面上的所有资源（例如包括图像）加载。

Answer 2

我认为你可以用纯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());
        }
        });
   });
});