title: How to make rounded label with an image inside (responsive)
body: <p>I am trying to make an input file with an image. I've got a working solution with div inside the blocked label. File uploads and a rounded preview comes. But this is solved via background. Looks like responsive and I am happy.
  But validator told me that it's not proper to put div inside a label tag.
  So i tried to put an image tag instead of div.. 
  and it doesn't work properly.
  <a href="http://jsfiddle.net/dkweb/mtsy33k1/9/" rel="nofollow">http://jsfiddle.net/dkweb/mtsy33k1/9/</a> </p>
  
  <pre><code>&lt;div class="photo_container"&gt;
  &lt;label for="file_photo_id"&gt;
  &lt;img class="preview" src="http://javascript.ru/img/ws_2.png"&gt;
  &lt;!--  &lt;img class="preview" src="https://im0-tub-ru.yandex.net/i?id=3b1992e3e1e8d68d24c678ffc749d2f5&amp;n=33&amp;h=170"&gt;
         and this doesnt work  --&gt;
  &lt;/label&gt;
              &lt;input type="file" name="file_photo" id="file_photo_id" /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>- uncomment the sec img and you'll see.
  It depends on resolution of the image. I can't hold it a circled always. 
  Will you advise on this issue?
  They grey area must stay not available for clicking - just a circle with an image inside.
  Thanks in advance.</p>