找到子圖像寬度並將其應用於包含父div div jquery

我有一個<img>和一些<p>的內部<div>。找到子圖像寬度並將其應用於包含父div div jquery

我想獲取子img的寬度並將其應用於父div的寬度，以便文本段落將換行寬度與img相同。

我希望能夠在同一頁面上進行多次迭代。

背景： 我開發使用磚石jQuery插件（http://desandro.com/resources/jquery-masonry）一個WordPress主題。我的主題與Gridalicious主題（http://suprb.com/apps/gridalicious）有一些共同之處，但是帖子的寬度和尺寸將由圖片寬度決定，並且不會一致。

我的HTML/CSS是一塵不染，但我的jQuery/JavaScript是相當不穩定 - 但如果我能得到一些指針，我應該能夠使用它。

任何幫助真正讚賞。

來源

2010-07-07 theothersimon

這很好。請注意，您必須使用$（window）.load（）而不是$（document）.ready（），因爲$（document）.ready（）會在圖像實際加載之前觸發，因此圖像將沒有寬度。

$(window).load(function() { 
    $('div').each(function() { 
     $(this).width($(this).find('img').width()); 
    }); 
});

編輯：注意，這將基部處的寬度關閉在div的第一圖像。只需更改索引（[0]），使其脫離div中的另一個圖像。

編輯2：應用John對.width（）函數的修正。

來源

2010-07-07 13:39:19

這是一點點klunky。例如，width（）無論如何都只返回第一個選定元素的寬度，所以'img'的整個聲明是多餘的。另外，窗口上的負載不好，因爲它會等待整個頁面完成加載。將腳本放在頁腳中可以正常工作。 – 2010-07-07 13:56:12

@John你說得對寬度（）。但是，窗口負載是必要的。我們希望等到所有內容都被加載後，因爲除非圖像的寬度被明確聲明，否則瀏覽器將不知道圖像有多寬，即使元素已被解析。 – 2010-07-07 14:27:46

嗨，大家好，謝謝你的指點。我已上載我一起完成這在這裏工作，如果你有興趣的工作的例子「概念驗證」： www.simonlast.co.uk/example/04.html 似乎是工作，但它似乎可能會出現一些意想不到的與磚石的相互作用，但我認爲這是我可以調整的。感謝您的幫助，非常感謝。 – theothersimon 2010-07-07 15:40:20

這將找到頁面上的所有div，並將它們的寬度設置爲等於它們的img子元素的寬度。

$('.divselector').attr('width', $(this).find('img').attr('width'))

來源

2010-07-07 13:20:45

只要確保你添加一個類到div並使用它來選擇div。否則，這將適用於DOM中的所有div。 – 2010-07-07 13:23:51

根本不需要使用Javascript。如果你把圖像和p到孩子的div，這可以純粹CSS做在克里斯的解決方案（這裏的的jsfiddle：http://jsfiddle.net/glee/qs8GJ/以下SO問題： css - shrink a parent div to fit one child's width and constrain the width of the other child

訣竅是父DIV設爲...

display: table-cell;

圖像div來...

display: table-row; 
width: 1px;

...和包含段落文本的div來

display: table-cell; 
width: 1px;

工程就像魅力！

來源

2016-04-17 02:48:17 clayRay

找到子圖像寬度並將其應用於包含父div div jquery

回答

相關問題