HTML / IE: stretch image to fit, keep aspect ratio

Question

In the HTML window, I set a custom body

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

to display the image.

Now I want to edit the image to fit the available window, but keep the aspect ratio.

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

Stretches, but also distorts the image.

Are there any HTML tricks for this? IE's solution is just fine, as it resides in a hosted controller.

Answer 1

If you want to maintain aspect ratio, you need to specify only one dimension, that is:

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

You can use javascript to determine max size and resize

 <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> 

Answer 2

If you know the height or width, you can only set this. A different size will be automatically set based on the aspect ratio of the image.

Answer 3

No, you have to use Javascript for this, and it is more complicated than it seems. I did something similar the other week, here, using the function I created for her, you could reinstall it

Oh and he 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); } 

Answer 4

Parameter width = 100% is not a great answer, because it does not take into account the height and can overflow the element in the Y direction from the window.

This solution resizes the element once at boot time, and also when resizing, checks the aspect ratio of the window and determines whether the height should be 100% or the width should be 100%. This will always hold the FULL element in the window and maximize it while maintaining the aspect ratio.

 function changeElementSize(){ // Compare your element aspect ratio with window 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(); }); 

Answer 5

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; } 

HTML:

 <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/

Answer 6

this version of @hfarazm code makes the div that pic is at full vertical size, centered horizontally, if you make it full size horizontally, it will be vertically centered, I think this is the best way without using js (with tommybananas code perhaps it will become possible for it to work fully) 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> 

CSS

 .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; } 

http://jsfiddle.net/5p0ugfLw/

Answer 7

Pure HTML

This can be done in JavaScript if you know the aspect ratio of the image. I don't know if this is possible via JS, but you can pass this JavaScript value if you use any other language.