Databases
StackOverflow2013
Postsdbo
POgetting dimensions of images scaled in percentage by css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POgetting dimensions of images scaled in percentage by css
    text
    copied!<p>I'm trying to get the dimensions (width) of image elements which are scaled using percentage values by css.</p> <p>Here is the code:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;ul id="gallery_content"&gt; &lt;li&gt;&lt;img src="images/thumbs/1.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/2.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/3.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/4.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/5.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/6.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/7.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/8.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/9.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/2.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/3.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/4.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/5.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/6.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/7.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/8.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/9.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/2.jpg"/&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/thumbs/3.jpg"/&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>and here the css: </p> <pre><code>ul#gallery_content li{ background:#FFF; list-style:none; display:inline; float:left; margin:0; height: 100%;} ul#gallery_content li img { width:auto; height:100%; width:auto; } </code></pre> <p>I'm trying to get the actual width of the wrapper-Element (total of all image-widths). When accessing them in a </p> <pre><code>$(document).ready( galItems = $('#gallery_content').children().children(); galSize = 0; $.each(galItems, function(index, item){ galSize += parseInt(item.width) }); ) </code></pre> <p>It gets all the image elements but does not get the calculated width. Is there any chance to get the actual rendered width of the images with jquery?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload