title: IMG has 0x0 pixels when src added with jQuery
body: <p>I was making custom modal popup(#light1). In my JavaScript I take src from the image I clicked on and add it to img tag with id addable. </p>
  
  <p>jQuery</p>
  
  <pre><code>var images=$('#raam img'), index=0
  $(images).click(function() {
      var src= $(images.eq(index)).attr('src');
      $("#addable").attr('src', src)
      $('#light1').css("display","block")
  });
  </code></pre>
  
  <p>And HTML</p>
  
  <pre><code>&lt;div id="raam"&gt;                
      &lt;img id="pilt1" src="uudistepildid/1.jpg" alt="1"&gt;
      &lt;div id="light1" class="wcontent"&gt;
          &lt;img id="addable"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS            </p>
  
  <pre><code>#addable { 
      width: 600px;
      height: 600px; //even forcing doesn't help
  }
  </code></pre>
  
  <p>This all works fine. When I inspect it shows me the right src and sytle with width and height, but it has size 0x0 and I can't change it. It even tells me its natural size. I leave snapshot with the problem.</p>
  
  <p>This is what inspector shows:</p>
  
  <p><img src="https://i.stack.imgur.com/zlSdR.png" alt="http://i.stack.imgur.com/zlSdR.png"></p>
  
  <p>This is what it looks like( I took out some unnessesay code, just to make it faster to read);</p>
  
  <p><img src="https://i.stack.imgur.com/5iDb6.png" alt="http://i.stack.imgur.com/5iDb6.png"></p>