title: Fitting image width to screen by preserving ratio and max size
body: <p>I would like to be able show an image with the width fitting to the browser screen and height resizing according to the aspect ratio with the image not getting bigger then his original size.
  I found <a href="https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window">this post</a> and the link provided in the first answer is kinda what I want but not exactly. It resizes the image without any restraints on the maximum size. How can I do that?</p>
  
  <hr>
  
  <p>The code from the answer:</p>
  
  <pre><code>(function ($) {
  
  $.fn.photoResize = function (options) {
  
      var element = $(this), 
          defaults = {
              bottomSpacing: 10
          };
  
      $(element).load(function () {
          updatePhotoHeight();
  
          $(window).bind('resize', function () {
              updatePhotoHeight();
          });
      });
  
      options = $.extend(defaults, options);
  
      function updatePhotoHeight() {
          var o = options, 
              photoHeight = $(window).height();
  
          $(element).attr('height', photoHeight - o.bottomSpacing);
      }
  };
  
  }(jQuery));
  </code></pre>