英文:
Image disappears after applying align-items
问题
I need to apply 'align-items' to the flex container, but when I do, the image disappears.
我需要将 'align-items' 应用于 flex 容器，但当我这样做时，图像消失。
I have a container that displays flex. And image inside that is in block using ratio 16/9.
我有一个显示 flex 布局的容器，容器内的图像按比例 16/9 显示为块。
I want to apply 'align-items' to .container class and expected the image not to disappear.
我想将 'align-items' 应用于 .container 类，并期望图像不会消失。
英文:
I need to apply 'align-items' to the flex container, but when I do, the image disappears.
I have a container that displays flex. And image inside that is in block using ratio 16/9.
I want to apply 'align-items' to .container class and expected the image not to disappear.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: column;
background-color: #abbaea;
width: 500px;
height: 500px;
justify-content: center;
}
.container > div {
background-color: #fbd603;
}
.container > div .aspect-ratio-16-by-9 {
position: relative;
}
.container > div .aspect-ratio-16-by-9 .media {
position: relative;
top: 0;
left: 0;
width: 100%;
}
.container > div .aspect-ratio-16-by-9 > :first-child {
width: auto;
max-width: 100%;
}
.container > div .aspect-ratio-16-by-9 > img {
max-height: 100%;
}
.container > div .aspect-ratio-16-by-9::before {
content: "";
display: block;
padding-bottom: calc(100% / calc(16 / 9));
}
.container > div .aspect-ratio-16-by-9 > :first-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
max-height: 100%;
}
<!-- language: lang-html -->
<div class='container'>
<div>
<div class="aspect-ratio-16-by-9">
<img class='media' src='https://i.ibb.co/4S4J60N/tree1000-1.png' />
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
以下是翻译好的内容：
当你将 align-items 应用于 .container 时，它会占用水平轴上的所有可用空间，因此将子 div 压缩为 0 宽度。
这是因为子 div 上没有定义宽度。
要解决这个问题，向子 div 添加 width: 100%。
.container {
display: flex;
flex-direction: column;
background-color: #abbaea;
width: 500px;
height: 500px;
justify-content: center;
align-items: center; /* 新增 */
}
.container>div {
width: 100%; /* 新增 */
background-color: #fbd603;
}
<div class='container'>
<div>
<div class="aspect-ratio-16-by-9">
<img class='media' src='https://i.ibb.co/4S4J60N/tree1000-1.png' />
</div>
</div>
</div>
英文:
When you apply align-items to the .container, it consumes all available space in the horizontal axis and, as a consequence, squeezes the child div to 0 width.
This happens because there is no width defined on the child div.
To fix the problem, add width: 100% to the child div.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: column;
background-color: #abbaea;
width: 500px;
height: 500px;
justify-content: center;
align-items: center; /* NEW */
}
.container>div {
width: 100%; /* NEW */
background-color: #fbd603;
}
.container>div .aspect-ratio-16-by-9 {
position: relative;
}
.container>div .aspect-ratio-16-by-9 .media {
position: relative;
top: 0;
left: 0;
width: 100%;
}
.container>div .aspect-ratio-16-by-9> :first-child {
width: auto;
max-width: 100%;
}
.container>div .aspect-ratio-16-by-9>img {
max-height: 100%;
}
.container>div .aspect-ratio-16-by-9::before {
content: "";
display: block;
padding-bottom: calc(100% / calc(16 / 9));
}
.container>div .aspect-ratio-16-by-9> :first-child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
max-height: 100%;
}
<!-- language: lang-html -->
<div class='container'>
<div>
<div class="aspect-ratio-16-by-9">
<img class='media' src='https://i.ibb.co/4S4J60N/tree1000-1.png' />
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论