Keep Image Ratio Using Max-Width and Max-Height in Ie 11

Keep image ratio using max-width and max-height in IE 11

This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)

.img-flux img {
    flex: 1;
    max-width: 100%;
    max-height: 100%;
}

works for me. Flexbox for the parent seems ok, so even centering is easy.

Another option is

flex: 0 0 auto;  /* IE */
object-fit: scale-down; /* FF */

on the img, instead of flex: 1 , increasing compatibility with Firefox. See comments and bug report for more info.

max-width and max-height for scaling images in Internet Explorer

have you tried height:auto and width:auto as well as using max-height and max-width, this usually results in IE rendering the correct aspect ratio.

Maintain image aspect ratio in nested flexbox container on IE11

It looks like adding min-height: 1px; to the img is the solution. I wish I had a good explanation for why this works. Here's the best I could find:

... My best guess is that the min-height forces IE to recalculate the
height of the rendered content after all of the resizing, and that
makes it realize that the height is different....

IE not maintaining aspect ratio when using max-width with svg image

You've explicitly set a width and a height in the opening tag of your SVG. If you remove them, this works in IE (tested in IE11):

img, svg {  max-width: 50px;  height: auto;}

Has height set: <img src="http://dauntless.herokuapp.com/assets/images/who-we-are-nav-f35af64a3b.svg" alt="Sample Image"> 
Does not have height set: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 174"><g fill="#715f6a"><path d="M113.72 95.354c-.477.516-1.11.808-1.85.95-.222.047-.443.02-.66.02-.97 0-1.87-.258-2.508-.943-.802.14-1.455.62-1.725 1.62h8.472c-.275-1-.928-1.507-1.73-1.646z"/><path d="M87.28 1.105c-47.535 0-86.07 38.536-86.07 86.072s38.535 86.07 86.07 86.07c47.537 0 86.072-38.534 86.072-86.07 0-47.536-38.535-86.072-86.07-86.072zm9.438 45.412a8.808 8.808 0 0 1 8.81 8.81c0 4.867-3.944 8.813-8.81 8.813-4.867 0-8.81-3.947-8.81-8.813a8.81 8.81 0 0 1 8.81-8.81zm-29.123-.003c4.867 0 8.813 3.944 8.813 8.81a8.814 8.814 0 0 1-8.813 8.813c-4.866 0-8.81-3.947-8.81-8.813a8.81 8.81 0 0 1 8.81-8.81zM106.93 128h-.002a4.65 4.65 0 0 1-4.664-4.65l-.004-6.35h9.33l.003 6.344A4.658 4.658 0 0 1 106.93 128zM124 116H98V97h6.62c.286-2 1.528-3.25 3.142-3.748-1.072-5.357-3.69-13.638-4.392-15.438-.702-1.796-2.014-1.245-1.075.486 1.384 3.3 2.99 8.896 4.145 14.418-1.27.66-2.235 1.282-2.713 3.282h-2.22c-1.594-1-2.883-2.412-3.315-4.428l-1.67-7.89c-2.284 2.4-5.79 3.516-11.45 3.815a3.398 3.398 0 0 1-3.207 2.234 3.29 3.29 0 0 1-.467-.044c-7.228-.988-11.28-2.637-13.735-5.503L66.12 91.38c-.497 2.322-2.125 3.808-4.054 4.575l-.017 27.767a4.665 4.665 0 0 1-4.665 4.665 4.67 4.67 0 0 1-4.665-4.67l.02-29.35c-1.84-1.564-2.972-3.84-2.43-6.38l4.077-18.835c.758-3.543 4.35-5.15 7.4-5.15h.026s1.075-.174 2.004 0c.968.186 1.82.564 1.82.564 2.248 1.09 4.398 3.3 4.664 6.037.033.13.08.237.098.377.627 4.424 1.102 7.207 2.404 8.71 1.004 1.164 2.9 1.99 6.12 2.647a3.408 3.408 0 0 1 2.907-1.644c5.33 0 8.3-.537 9.618-1.74 1.28-1.166 1.874-3.814 2.47-7.995.018-.14.064-.266.096-.4.266-2.736 2.417-4.99 4.664-6.082 0 0 .848-.465 1.82-.65.93-.18 2-.182 2-.182l.027-.003c3.054.09 5.503 1.79 6.263 5.332 0 0 5.35 20.998 5.785 23.227.06.292.062.76.046 1.044 1.633.484 2.894 1.758 3.182 3.758H124V116z"/></g></svg>

Image max height and max width while preserving aspect ratio

You can nest the image in a 200x38 container, then set the max-width and max-height of the image to 100%. Here is a working snippet (I have included JS to make it interactive, but it is not necessary. Try resizing the container using the sliders):

var width = document.getElementById("width");
var height = document.getElementById("height");

var widthInput = document.getElementById("widthInput");
var heightInput = document.getElementById("heightInput");

var imageContainer = document.querySelector("div");

widthInput.addEventListener("input", function() {
  width.innerHTML = this.value + "px";
  imageContainer.style.width = this.value + "px";
});

heightInput.addEventListener("input", function() {
  height.innerHTML = this.value + "px";
  imageContainer.style.height = this.value + "px";
});

div {
  width:  200px;
  height: 200px;
  border: 1px dashed #000;
}

.image {
  display:    block;
  max-width:  100%;
  max-height: 100%;
  background: #333;
}

<div>
  <img class="image" src="https://via.placeholder.com/400"/>
</div>

<br/>

<label>Width: <span id="width">200px</span></label>
<br/>
<input id="widthInput" type="range" min="0" max="400"/>
<br/>
<label>Height: <span id="height">200px</span></label>
<br/>
<input id="heightInput" type="range" min="0" max="400"/>

max-height and max-width unexpected behavior in FF and IE11 under flexbox

I could unfortunately not find any solution to this so I had to use display:table/display:table-cell and vertical-align:middle instead.

Working copy available at Codepen.

Markup

<div id='flex'>
  <div>
     <div>
        <img src='https://www.google.se/images/srpr/logo11w.png' />
    </div>
  </div>
</div>

CSS

#flex {
  display:table;
  background:purple;
  width:200px;
  height:200px;
}

#flex > div { 
  display:table-cell;
  height: inherit; 
  vertical-align: middle;
  width:inherit; 
}
#flex > div > div {
  width:inherit;
}

img {
  max-height: 100%;
  max-width:100%;
}

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Max-width and max-height for images in Internet Explorer 7

Its fixed, you can check it here:

<style type="text/css">
#content {
    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;
}
#featured {
    position:relative;
    width:100%;
}
#featured-images {
    text-align:center;
}
#featured-images img {
    max-height:100%;
    max-width:100%;
    height:auto;
    width:auto;
}
</style>

<div id="content">
    <div id="featured">
        <div id="featured-images">
            <img src="https://www.google.co.in/images/srpr/logo4w.png" />
        </div>
    </div>
</div>

Or here Fiddle http://jsfiddle.net/Fqebe/1/

Cheers!

---

Related Topics