时间戳

首页 > 解决方案 > 不同浏览器的图片长宽比不同

css - 不同浏览器的图片长宽比不同

问题描述

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

![IE11（左侧）和 Firefox（右侧）。菜单和临时消息之间底部的小矩形是未正确显示的图像。] 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>

标签： cssimageflexboxaspect-ratio

解决方案

推荐阅读