html - 在 flexbox 布局中使图像 + 容器高度不超过 100vh 单位

Question

我正在制作一个典型的移动应用程序展示一页，但我无法尝试将应用程序屏幕截图示例放入具有智能手机轮廓背景的容器中，然后让其中的 2 个不超过视口(viewport)高度(我正在处理的特定部分的高度为 100vh)。

用图片解释，这就是我所追求的:

一整天都在尝试，似乎无法解决问题。我知道我的问题出在屏幕截图容器和 img 的某个地方。由于这是 flexbox 并且父级将其子级放置在一行中，因此 img 容器占据了宽度的 50％，并且其背景恰好适合其高度，因为它具有 background-size: contain 集。但是当img被渲染的时候，它占据了它parent的100%，也就是容器，也就是它的flex容器宽度的50%。那么，我如何才能强制图像仅根据其父级调整其高度，并根据正确的宽高比调整宽度大小？

HTML

<section>
<div class="section-wrapper">
<div class="section-texts-wrapper">
<div class="section-texts-icon">
<img src="http://placehold.it/200x50" alt="Create">
</div>
<div class="section-texts-content">
<p><strong>This is a subtitle.</strong></p>
<p>This is some text. This is some text. This is some text. This is some text. This is some text. </p>
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
</div>
</div>
<div class="section-screenshot">
<img src="http://placehold.it/750x1334">
</div>
</div>
</section>

CSS

html {background-color: #000;}

section {
margin: 0;
width: 100%;
height: 100vh;

background-color: #333;
color: #999;
}

.section-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
height: 100%;
}

.section-screenshot {
background: url(https://dl.dropboxusercontent.com/s/rn2y4x2zyjuoq0i/phone_outline.svg?dl=0) center top no-repeat;
background-size: contain;
text-align: center;
max-height: 90vh;
}

.section-screenshot img {
width: 70%;
padding: 15% 0 15%;
opacity: 0.6;

}

这是一个带有基本布局的codepen:https://codepen.io/mrmerrick/pen/KNvRoy

编辑 - 这是我所追求的一些更直观的解释。

Answer 1

我认为这段代码解决了您的问题:

.section-screenshot img {
  margin-top: 7.5vh;
  height: 70vh;
  opacity: 0.6;
}

.section-screenshot {
  width: auto;
  height: 90vh;
  padding: 2.5vh;
  text-align: center;
  background: url(https://dl.dropboxusercontent.com/s/rn2y4x2zyjuoq0i/phone_outline.svg?dl=0) center top no-repeat;
  background-size: contain;
}

现在屏幕截图图像行为由视口(viewport)高度决定。我正在使用 margin-top 和 vh 来获取手机图像中间的屏幕和由 90vh 设置的父容器>height(没有 max-height - 它不是必需的)具有自动 width(因为父容器根据图像大小而变化)和 padding(在图像周围留出空间)。

---

看这个例子:

html {background-color: #000;}

section {
margin: 0;
width: 100%;
height: 100vh;

background-color: #333;
color: #999;
}

.section-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	height: 100%;
}

.section-screenshot	{
  width: auto;
  height: 90vh;
  padding: 2.5vh;
  text-align: center;
  background: url(https://dl.dropboxusercontent.com/s/rn2y4x2zyjuoq0i/phone_outline.svg?dl=0) center top no-repeat;
  background-size: contain;
}

	.section-screenshot img	{
  margin-top:7.5vh;
  height: 70vh;
  opacity: 0.6;
}

<section>
	<div class="section-wrapper">
		<div class="section-texts-wrapper">
			<div class="section-texts-icon">
				<img src="http://placehold.it/200x50" alt="Create">
			</div>
			<div class="section-texts-content">
				<p><strong>This is a subtitle.</strong></p>
				<p>This is some text. This is some text. This is some text. This is some text. This is some text. </p>
				<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p>
			</div>
		</div>
			<div class="section-screenshot">
				<img src="http://placehold.it/750x1334">
			</div>
	</div>
</section>

修复了您的 Codepen