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

时间:2012-01-27 03:50:27

标签: jquery css responsive-design

编辑1/27/12 11:32 am - 我相信我已修复了与此脚本相关的所有问题。我需要将CSS类应用于我想要调整大小的每个图像,具体取决于我是想将其向左,向右浮动还是使其居中,但我可以忍受它。在http://evanwebdesign.com/responsive-web-design/example5.html

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

编辑1/27/12 10:50 am - 此脚本仍有问题。请参阅下面的评论。正在修复。

编辑1/27/12 9:00 am:我现在几乎已经完成了这个问题。请参阅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

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

相反,我想编写一个jQuery脚本,它将执行以下操作:

  • 浏览#content div

  • 中的所有图片
  • 获取每个图像的宽度(我意识到我需要使用$(window).load(),否则我将最终得到图像值0)

  • 获取图像的宽度(以像素为单位)并将其除以900.(900是应用填充后#content div的任意最大宽度像素值。)

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

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

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

提前感谢大家的帮助!

2 个答案:

答案 0 :(得分: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后立即执行,而不是等待页面上的所有资源(例如包括图像)加载。

答案 1 :(得分:0)

我认为你只能用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());
        }
        });
   });
});