Question

我正在将基于CSS网格的布局调整为基于Flex的布局，并且我尝试了各种阅读方法，以确保该布局中的图像保持其纵横比，但是由于某些原因，如果在Firefox中是正确的，则在IE11中是不同的，如果在IE11中是正确的，则在Firefox中是错误的。布局是一个简单的布局（我认为）。它具有用于页面的整体flex列容器，然后在“底部”具有较小的flex行。知道发生了什么问题以及如何在不考虑浏览器的情况下如何以正确的纵横比显示图像吗？我已经附上了小图像显示的屏幕截图。

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

谢谢。

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

图像纵横比在不同的浏览器中是不同的

0 个答案: