jQuery get dynamic width of multiple elements on browser resize
<p>Title pretty much explains most of my question. I will provide some context.</p>

<p>I've got something like this. (simplified)</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;img src="image1.jpg"/&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="image2.jpg"/&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="image3.jpg"/&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>each li is tiled up horizontally. Like so:</p>

<pre><code> [   ][   ][   ][   ]
</code></pre>

<p>So I already have this script that stretches the image <strong>height</strong> and keeps the aspect ratio.
But now <strong>I need a script which will dynamically get width of all the images (or li) even after the browser has been resized</strong>. 
To my understanding I need something like event bubbling or delegation of some sort. I have no idea how to continue this jQuery journey. </p>

<p>image links to different browser settings I'm talking about</p>

<p>Normal browser height</p>

<p><a href="http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg" rel="nofollow">http://f.cl.ly/items/1O3w3M3l3b3a0z2B0U1w/image1.jpg</a></p>

<p>Decreased browser height</p>

<p><a href="http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg" rel="nofollow">http://f.cl.ly/items/3y3K38243J063J1U2f1P/image2.jpg</a></p>
