如何布局图像，使其位于广告空间的左侧，但仍使用flexbox居中 [英] How to layout image so it is to left of ad space and yet centered using flexbox
问题描述
我有以下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个部分（标题和部分），它们都占据了整个视口宽度/高度。然后在部分（第二个完整页面视图）中，将文本垂直和水平居中。在标题（第一个完整页面视图）中，其布局如下：
I am trying to make it so I have 2 "sections" (the header and the section), both taking up the full viewport width/height. Then in the section (the second full page view), it centers the text vertically and horizontally. In the header (first full page view), it is laid out like this:
_____________________
| | |
| | |
| centered | |
| image | ad |
| | |
| | |
|_______________|_____|
图像将填充所有尺寸以使其居中。例如，像这样：
The image will be such that it fills whatever dimension will keep it centered. For example, like this:
___________________
| _______________ |
| | | |
| | | |<-- image
| | |<---- viewport
| | | |
| | | |
| | | |
| |_______________| |
|___________________|
或在更大的屏幕上：
___ viewport
|
|
___|_______________<-- image
|___v_______________|
| |
| |
| |
| |
| |
| |
|___________________|
|___________________|
图像不会拉伸，但会放大和缩小以完全填充视口，在这种情况下，这只是窗口的一部分，因为我们在那里有广告空间。
The image doesn't stretch but it zooms in and out so as to completely fill the viewport, which in this case is only part of the window since we have the ad space there.
知道如何执行此操作将可以将任何图像放置在容器中，因此正确地填充了容器。
Knowing how to do this will make it possible to position any image in a container so it fills the container properly.
想知道如何做到这一点。
Wondering how to accomplish this.
现在看起来像这样并且没有'向右滚动：
Right now it looks like this and it doesn't scroll right:
推荐答案
您是否尝试过设置背景尺寸？
Have you tried setting background-size?
header > div {
background-position: center;
background-size:cover;
}
还是使用媒体查询根据视口设置背景大小？
or using media query to set background size based upon viewports?
@media screen and (max-width: 992px) {
header > div {
background-position: center;
background-size:70%;
}
}
这篇关于如何布局图像，使其位于广告空间的左侧，但仍使用flexbox居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
