Full IMG background on DIV
This Fiddle fills a IMG inside a DIV, without using it as background-image, without white-spaces, retaining aspect ratio and scaling it.
HTML
<!-- Based on the example found in this site: http://css-tricks.com/perfect-full-page-background-image/ -->
<div class="container">
<img src="https://www.gravatar.com/avatar/9bc69b8d4bbf5ae2d238caf101d667e0?s=80" alt="Mandarinazul" width="630" height="337" />
</div>
<p class="resized"></p>
CSS
body, html {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 60%;
height: 70%;
border: dashed 2px #f7860b;
overflow: hidden;
text-align: center;
}
.resized {
font-family: Helvetica,Arial, "sans-serif";
}
JavaScript
/** Copyright (c) 2013-2014 Mandarinazul
* Author: Julian Acosta
* Licence: http://opensource.org/licenses/MIT
* Version: 1.2.5
*/
(function(e){e.fn.aspectRatioResizeImg=function(t){var n=e.extend({backgroundHorizontalAlign:"CENTER",backgroundVerticalAlign:"MIDDLE",resizeContainerType:null,debug:false,callback:null,imageClass:null,mode:"FILL",horizontalAlignFrom:"LEFT",verticalAlignFrom:"TOP"},t);return this.each(function(){function h(){f=a.width()/a.height();l=c.attr("width")/c.attr("height");m()}function p(){if(n.resizeContainerType==="WIDTH"){var e=a.height()*l;if(a.css("box-sizing")==="border-box"){e+=parseInt(a.css("padding-left"));e+=parseInt(a.css("padding-right"));e+=parseInt(a.css("border-left-width"));e+=parseInt(a.css("border-right-width"))}a.css("width",e)}else{if(n.resizeContainerType==="HEIGHT"){var t=a.width()/l;if(a.css("box-sizing")==="border-box"){t+=parseInt(a.css("padding-top"));t+=parseInt(a.css("padding-bottom"));t+=parseInt(a.css("border-top-width"));t+=parseInt(a.css("border-bottom-width"))}a.css("height",t)}}g()}function d(){var e=f>l?true:false;if(n.mode==="FILL"){if(e){c.attr("width",a.width());c.attr("height",c.attr("width")/l)}else{c.attr("height",a.height());c.attr("width",c.attr("height")*l)}}else if(n.mode==="FIT"){if(e){c.attr("height",a.height());c.attr("width",c.attr("height")*l)}else{c.attr("width",a.width());c.attr("height",c.attr("width")/l)}}else if(n.mode==="STRETCH"){c.attr("width",a.width());c.attr("height",a.height())}y()}function v(){t=a.height();r=c.height();i=r-t;s=a.width();o=c.width();u=o-s;if(n.mode==="CENTER"){c.css("marginLeft",-u/2);c.css("marginTop",-i/2)}else if(n.mode==="VERTICAL_CENTER"){c.css("marginTop",-i/2);if(n.backgroundHorizontalAlign==="LEFT"){c.css("marginLeft",0)}else if(n.backgroundHorizontalAlign==="CENTER"){c.css("marginLeft",-u/2)}else...