通过Javascript查找图像宽度并应用于wordpress中的包装器div答案

【问题标题】：Find image width & apply to wrapper divs in wordpress via Javascript通过Javascript查找图像宽度并应用于wordpress中的包装器div
【发布时间】：2014-11-24 13:20:56
【问题描述】：

我想找到一种方法，让包装器 div 的宽度成为其中的图像（特色图像）的大小，使它们彼此等距。

我想我可能在这里找到了答案：http://www.webmasterworld.com/javascript/3724001.htm（底部的解决方案）但我不确定如何将它应用到我的网站：http://amuletts.com/barbaragorayska/

可能是这样的……？

    window.onload=function() {
    setCaptions();
    }

    function setCaptions() {
    var picwidth=[];
    var containerDiv=document.getElementById('#primary-home');
    var dvs=containerDiv.getElementsByTagName('div');
    for(var c=0;c<dvs.length;c++) {
    if(dvs[c].id=='homepage-article .featured-image') {
    picwidth[c]=dvs[c].getElementsByTagName('img')[0].clientWidth;
    dvs[c].style.width=picwidth[c]+'px';
    }
    }
    }

【问题讨论】：

那么...你的尝试效果如何？

标签： javascript jquery wordpress image width

【解决方案1】：

只需使用 jQuery：

<script type="text/javascript">
jQuery( document ).ready(function($) {
  $('.article-wrapper').each(function(){
    var width = $(this).find('img').width;
    $(this).css('width',width+'px');
    var height = $(this).find('img').height;
    $(this).css('height',height+'px');
  });
)};
</script>

【讨论】：

感谢您的帮助。

【解决方案2】：

我在 wordpress 寻求帮助并得到了这个 javascript，它就像一个魅力。

var $ = jQuery,
articles = $('.article-wrapper'),
widths = 0,
target = $('#primary-home');

articles.each(function() {

widths += $(this).width();

 });

target.css('width', widths);

有人告诉我，它应该可以通过 CSS 实现。如果我确实设法让它以这种方式工作，我会再次发布如何。

【讨论】：