Tutorial :HTML/IE: stretch image to fit, preserve aspect ratio


In an HTML window, I am setting a custom body

<img src="file://[filename]">  

to display an image.

Now I want to strectch the image to fit the available window, but preserve aspect ratio.

<img src="file://[filename]" width="100%" height="100">  

stretches but also distorts the image.

Is there some HTML trickery to do that? IE only solution is fine, since this is in a hosted broweser control.


If you want to preserve aspect ratio, you only need to specify one dimension ie:

<img src="file://[filename]" width="100%" alt="" />  

You can use javascript to determine max dimension and resize accordingly

<script type="text/javascript">  function getImgSize(id){  var pic = document.getElementById(id);  var h = pic.offsetHeight;  var w = pic.offsetWidth;  alert ('The image size is '+w+'*'+h);  }  </script>  


If you know either the height or width, you can set only that. The other dimension will be automatically set based on the aspect ratio of the image.


Nope, you're going to have to use Javascript for this, and it's trickier than it sounds. I did something similar the other week, here;s the function I created for it, you might be able to re-appropriate it

Oh, and it needs jQuery

function resize_background(){        var target = $("#background_image");      var window = $(window);      var ratio = 1;      var anchor_point = 200;      var register_point = 400;        if(window.width() > min_width){          ratio = window.width() / min_width;          target.css("marginLeft", 0);      }else{          // center to screen          // For this project, this aint needed.          //var left_margin = (window.width() / 2) - (min_width / 2);          //target.css("marginLeft", left_margin);      }        // now figure out anchor stuff      var top = ((register_point * ratio) - anchor_point) * -1;        target.width(min_width * ratio);      target.height(min_height * ratio);      target.css("marginTop", top);        $("#trace").text(top);      }  


Setting width = 100% isn't exactly a great answer because it doesn't account for height and could overflow the element in the Y direction off the window.

This solution resizes the element once on load and also on resize, checking the aspect ratio of the window and determining if height should be 100% or width should be 100%. This will always keep the FULL element in the window and maximized while preserving aspect ratio.

function changeElementSize(){      // Compare your element's aspect ratio with window's aspect ratio      // My element was 100w x 80h so mine was 1.25      if (window.innerWidth/window.innerHeight > 1.25){          $('#element').css('height','100%');          $('#element').css('width','auto');      } else {          $('#element').css('width','100%');          $('#element').css('height','auto');      }  }    $( window ).resize(function() {      changeElementSize();  });    $( window ).load(function() {      changeElementSize();  });  


pure HTML solution: this is my technique.

 .iCon {      height: 267px;      width: 520px;      background-color: #0F3;      overflow: hidden;      }  .iCon img {      margin-right: auto;      margin-left: auto;      height: 350px;      text-align: center;      display: table-cell;      margin-top: -50px;      }  


<div class="iCon">     <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg">  </div>  

DEMO: http://jsfiddle.net/PBbcF/


this version of @hfarazm code makes a div in wich the pic is on full vert size centered horizontally, if you make it full size horizontally it would be vertically centered, I think its the best way without using js (with tommybananas code it may be possible to make it completely work) or php or something else: HTML

<div class="centeredImage">      <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg">  </div>  


.centeredImage {      height: 500px;      width: 500px;      background: rgba(0,0,0,0.0);      overflow: hidden;      display: flex;      align-items: center;      justify-content: center;  }  .centeredImage img {      margin: auto;      width: 500px;  }  



Pure HTML no.

This could be done in JavaScript if you know the aspect ratio of the image. Don't know if that is possible via JS though, but you could pass that value to the JavaScript if you are using any other language as well.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »