У меня есть следующий HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
* {
box-sizing: border-box;
}
section, header {
width: 100vw;
height: 100vh;
}
header {
display: flex;
flex-direction: row;
}
header div {
flex: 1;
}
header aside {
background: black;
}
</style>
</head>
<body>
<header>
<div style='background-image: url(https://i.cloudup.com/C9UpLWmovB.jpg);'>
</div>
<aside>
</aside>
</header>
<section>
<p>Hello World.</p>
</section>
</body>
</html>
Я пытаюсь сделать так, чтобы у меня было 2 "секции" (header и section), обе из которых занимают всю ширину / высоту области просмотра. Затем в section (второй полный просмотр страницы) он центрирует текст по вертикали и горизонтали. В header (первом полном просмотре страницы) это выглядит так:
_____________________
| | |
| | |
| centered | |
| image | ad |
| | |
| | |
|_______________|_____|
Изображение будет таким, что оно заполняет любое измерение, сохраняя его в центре. Например, вот так:
___________________
| _______________ |
| | | |
| | | |<-- image
| | |<---- viewport
| | | |
| | | |
| | | |
| |_______________| |
|___________________|
Или на более широком экране:
___ viewport
|
|
___|_______________<-- image
|___v_______________|
| |
| |
| |
| |
| |
| |
|___________________|
|___________________|
Изображение не растягивается, но увеличивается и уменьшается, чтобы полностью заполнить область просмотра, которая в данном случае является только частью окна, поскольку у нас там есть рекламное пространство.
Знание того, как это сделать, позволит разместить любое изображение в контейнере, чтобы оно правильно заполняло контейнер.
Хотите знать, как это сделать.
Прямо сейчас это выглядит так и не прокручивается вправо:
