动态改变宽度和高度属性答案

【问题标题】：Dynamically Change width and height attribute动态改变宽度和高度属性
【发布时间】：2015-06-03 04:49:31
【问题描述】：

我想在商业催化剂中创建一个响应式图片库。 BC 的照片库模块会自动呈现缩略图，我想保留这些缩略图，因为它缩短了我的工作流程。当您创建照片库时，它允许您设置固定的宽度和高度，我想创建可以更改照片属性以适应屏幕的 jQuery。我尝试过使用 CSS，但它只会扭曲缩略图。

在某些情况下，我正在使用引导程序，我想创建一个流体网格（没有边距）。 Col-LG-3、Col-MD-4、Col-SM-6、Col-xs-12。

当画廊被渲染时，代码显示如下：

<img src="/images/jully-black-in-concert-10.jpg?Action=thumbnail&amp;Width=400&amp;Height=330&amp;Algorithm=fill_proportional&amp;USM=1" alt="" border="0">

为了使缩略图工作，我必须在代码中具有以下属性：

Width=400&amp;Height=330

有人可以帮助创建自动更改上述值以适应引导程序的网格系统的代码吗？

【问题讨论】：

在 jsfiddle.net 上做一个演示

标签： jquery css html twitter-bootstrap business-catalyst

【解决方案1】：

所以我做了什么来解决这个问题，因为我没有得到任何响应，所以我创建了一些 jQuery 来使用引导类将图片包装到 div 中。

$('#photos a').wrap("<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12 overflow img-responsive '></div>");

我将图片设置为大于 div 本身，并使用 jQuery 应用 img-responsive 类。

这不是最好的解决方案，但它对我有用。

【讨论】：

【解决方案2】：

我实际上能够通过创建一个 xml 提要并使用 JQuery 使用此代码将提要返回到我的页面来解决这个问题

$(function () {  
   $.ajax({  
            type: "GET",  
            url: "http://www.oneloveallequal.org/Galleries/Slide-show-with-hyphens/PhotoGallery.xml",
            dataType: "xml",
            success: function(xml) {  
                $(xml).find('img').each(function() {  
                   var location = 'http://www.oneloveallequal.org/Galleries/Slide-show-with-hyphens/';
                   var url = $(this).attr('src');  
                   var alt = $(this).attr('alt');
                   var des = $(this).attr('description');
                   var classReponsive = 'img-reponsive';
                    var thumbnail = '?Action=thumbnail&Width=940&Height=300&algorithm=fill_proportional&Format=png';
                   $('<div class="item"></div>').html('<img src="'+location+''+url+''+thumbnail+'" alt="'+alt+'"/><div class="carousel-caption"><p>'+alt+'</p></div>').appendTo('.carousel-inner');
                    $('.carousel-inner div').first().addClass('active');

                });  

            }  

        });

});

【讨论】：