title: Using jQuery UI .position on img with width: auto
body: <p>I'm building a very simple gallery. When clicking a thumbnail image, a fullsized image should pop up fixed in the center of the window, with a surrounding div to make it modal.</p>
  
  <p>I'm struggling to make jQuery's .position method work. If I set a pixel height and width for the image, it works fine. However, if I set a pixel height and width: auto, the image isn't centered as it should. I think centering in this case is done based on zero width.</p>
  
  <pre><code>$(document).on("click", ".galleri", function() {      
      if ($("#imgFullWindow").length === 0){
          $("body").append("&lt;div id='imgFullWindow'&gt;&lt;/div&gt;");
      }
  
      $("#imgFullWindow").css({
          display  : "none",
          position : "absolute",
          "z-index": "5",
          top      : "0px",
          left     : "0px",
          width    : $(document).width(),
          height   : $(document).height(),
          background: "rgba(0,0,0,0.7)"
      }).append("&lt;img /&gt;");
  
      $("#imgFullWindow img").attr("src", $(this)[0].src).css({
          height   : "150px",
          width    : "120px", //This works
          //width    : "auto", //This doesn't  
          position : "fixed"
      }).position({
          my: "center",
          at: "center center+40",
          of:$(window),
          collision: "none"
      });
  
      $("#imgFullWindow").fadeIn(500);
  });
  </code></pre>
  
  <p>See my fiddle here: <a href="http://jsfiddle.net/apAu3/" rel="nofollow">http://jsfiddle.net/apAu3/</a> Try commenting line 19 and uncomment line 20 to see what I mean.</p>