英文:
Adding wrapping div around divs with background-image hides the images
问题
我有3个带有来自URL的background-image的<div>。在容器内，它们都会显示出来。
但是，一旦我给它们添加包装<div>，它就不会显示，因为包装<div>没有高度。
是否有一种方法可以在不指定其高度的情况下使用包装<div>，并根据内部的<div>来计算它的高度？
在下面的片段中，我放了两个版本：一个没有包装<div>，其中可以看到3个图像，另一个有包装<div>，其中图像不会显示。
我认为这是因为我在高度和宽度上使用了百分比，它是从父级计算的。现在我用另一个<div>包装它，它从0计算百分比。那么，如何使它计算百分比，就像它是从外部父级计算的？
.container {
height: 100vh;
width: 100%;
}
.img {
background-image: url('https://images.pexels.com/photos/14641908/pexels-photo-14641908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: 50%;
width: 50%;
height: 50%;
background-repeat: no-repeat;
}
.images_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="container">
<div class="images_wrapper">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
英文:
I have 3 divs with background-image from a url. Below you can see that they all show up when inside the container.
But as soon as I add a wrapper div to them, it won't show up because the wrapper div has no height.
Is there a way to use the wrapper without specifying its height, and calculate it according to the divs inside?
In the snippet below I put the 2 versions: the one without the wrapping div where you can see the 3 images, and the one with the wrapping div where the images don't show up.
I assume that it's because I am using percentages for the height and width, and it calculates it from the parent. And now that I wrap it with another div, it calculates percentages from 0. But how can I then do the percentage calculation as if it was from the outer parent?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
height: 100vh;
width: 100%
}
.img {
background-image: url('https://images.pexels.com/photos/14641908/pexels-photo-14641908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: 50%;
width: 50%;
height: 50%;
background-repeat: no-repeat;
}
.images_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<!-- language: lang-html -->
<div class="container">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="container">
<div class="images_wrapper">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
.img divs在第二种情况下的高度为零，因此它们是不可见的。这是因为它们没有任何内容，它们的高度定义也是50%，因为它们的父容器/弹性容器没有定义高度。
为.img定义min-height以避免这种情况，或者为.images-wrapper定义一个高度，以获得50%高度的有效参考。
英文:
The height of the .img divs is zero in the second case, therefore they are not visible. That's because they don't have any contents, and their height definition of 50% also results to height zero, since their parent/flex container has no defined height.
Define a min-height for .img to avoid that, or define a height for .images-wrapper to get a valid reference for the 50% height if .img.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
height: 100vh;
width: 100%
}
.img {
background-image: url('https://images.pexels.com/photos/14641908/pexels-photo-14641908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: 50%;
width: 50%;
height: 50%;
background-repeat: no-repeat;
}
.images_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.images_wrapper .img {
min-height: 100px;
}
<!-- language: lang-html -->
<div class="container">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="container">
<div class="images_wrapper">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论