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

Question

编辑 2012 年 1 月 27 日上午 11:32 - 我相信我已经解决了与此脚本相关的所有问题。我需要为每个要调整大小的图像应用一个 CSS 类，具体取决于我是想将它向左、向右还是居中浮动，但我可以忍受。在 http://evanwebdesign.com/responsive-web-design/example5.html

上查看我的最新解释和演示

编辑 2012 年 1 月 27 日上午 10:50 - 此脚本仍有问题。请参阅下面的我的 cmets。正在解决问题。

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

我目前有一个响应式图像的示例，它根据http://evanwebdesign.com/responsive-web-design/example.html 发布的浏览器窗口的宽度进行调整。

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

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

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

• 浏览#content div中的所有图片

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

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

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

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

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

提前感谢大家的帮助！

Answer 1

据我了解，您希望将每个图像包装在一个 div 中，该 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 - $(document).ready 是一个更好的版本，可以与 jQuery 一起使用，因为它在 DOM 加载后立即执行，而不是等待页面上的所有资源（例如包括图像）加载.

Answer 2

我认为你可以只用 css 做到这一点

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

如果我理解错了，请告诉我

编辑

我认为这可以解决问题

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