Я адаптирую макет на основе сетки CSS к гибкому, и я попробовал все прочитанные мной способы, чтобы убедиться, что изображение в этом макете сохраняет соотношение сторон, но по какой-то причине, если он корректен в Firefox, он отличается в IE11, а если он корректен в IE11, то он неверен в Firefox.
Макет прост (я думаю). Он имеет общий контейнер столбца гибкости для страницы, а затем меньшую строку 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>