0

I'm adapting a css grid-based layout to a flex-based one, and I have tried all the various ways I've read to make sure an image in that layout maintains its aspect ratio, but for some reason, if it's correct in Firefox, it's different in IE11, and if it's correct in IE11 it's wrong in Firefox. The layout is a simple one (I think). It has an overall flex column container for the page, and then a smaller flex row at the "bottom". Any idea what's going wrong and how I can get the image to display at its correct aspect ratio regardless of browser? I have attached a screen capture of how the small image displays.

![IE11 (on the left) and in Firefox (on the right). The small rectangle at the bottom between the menu and the temporary message is the image that is not displaying correctly.]1

Thanks.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style media="screen">
* {
    margin: 0;
    color: white;
    box-sizing: border-box;
  }
body, html {
    background-color: black;
  }
.homepageflexcontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
.innerflexcontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  #homepageimage {
    align-self: center;
    width: 100vw;
    min-width: 280px;
    max-width: 1400px;
    min-height: 165px;
    max-height: 823px;
  }
div.message {
    text-align: right;
    min-width: 14em;
    font-size: calc(12px + 0.5vw);
    line-height: 1.25em;
  }
img.logo {
    min-width: 70px;
    width: auto;
    max-height: 50%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: .3vw;
  }

</style>
</head>

<body>
<div class="homepageflexcontainer">
    <img id="homepageimage" src="HomePage(big).png" alt="">
    <div class="innerflexcontainer">
    <div class="message">temporary message</div>
    <img class="logo" src="logo.jpg" alt="">

    <nav>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </nav>
</div>
</div>
</body>
Yetanotherusername
  • 109
  • 8
  • 1
    If you change the hardcoded pixels to use calculations based on the view width, then you'd get closer to solving your predicament. That's how the css frameworks like bootstrap or foundation handle these situations. – Iskandar Reza Oct 26 '18 at 19:37
  • Does this demonstrate the problem? https://jsfiddle.net/isherwood/u1mexgnL/ – isherwood Oct 26 '18 at 19:41
  • Isherwood: Unless the jsfiddle performs differently in IE11 than it does in FF or Chrome, then I don't think it's a good platform to demonstrate the issue. I think it has to be viewed directly in the browsers. – Yetanotherusername Oct 26 '18 at 19:50
  • I just found a solution on a similar question on SO. I guess I had not seen this kind of answer as a solution to this particular problem, but when one is at one's wit's end, you try new things. The answer is by @OZZIE and can be found here [link](https://stackoverflow.com/questions/30788131/css3-flexbox-maintain-image-aspect-ratio). It basically says to just wrap the tag in a
    because the formatting affects it differently. Sure enough, the the small image now shows up with the proper aspect ratio in each browser!
     – Yetanotherusername Oct 27 '18 at 12:38

0 Answers0