Flex项目大小从背景图像

Question

• 有一个flex项目
• 每个flex项目都应该显示为一个可点击的文件夹，其中包含特定的文本
• 据我所知，通过CSS实现这一点的唯一方法是有一个背景图像问题是，我还想得到以下内容:

1. 约束每个伸缩项，理想情况下仅通过宽度，例如max-width: 20%(在移动设备上显示得很好)
2. 让伸缩项自动扩展其宽度/高度以显示完整的背景图像(保留上述约束)

不幸的是，无法找到正确的参数组合，到目前为止它看起来像这样:

<div class="container">
<div class="column">
<a href="path1">name1</a>
</div>
<div class="column">
<a href="path2">name2</a>
</div>
</div>

.container {
height: 100vh;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.column {
max-width: 20%;
background-image: url("./ic-folder.png");
background-size: contain;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: space-around;

这并没有达到目标——看起来每个项目都足够大，只覆盖嵌套的<a>，他们不关心那里的背景，所以，他们比期望的要小。

我有一个假设，在这个特殊的情况下，我们可以硬编码项目的大小作为背景图像的大小，但这意味着每次背景图像被改变，我们需要调整css的新尺寸。

是否有任何CSS方法来强制元素以覆盖其背景图像的方式增长?

Answer 1

我认为与其在中添加图像，不如在background-image你可以把它放在元素。当你这样做，这个图像将是可点击的。如果你使用我为img写的样式代码您创建了一个响应式图像。如果你想控制图像的大小，你可以用这种方式来控制它的父div，你可以控制宽度。所以我建议你给。column指定宽度并控制你的宽度和图像的问题。

.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.column {
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
max-width: 20%;
/* background-image: url("https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg");
background-size: contain;
background-repeat: no-repeat; */
}
img {
max-width: 100%;
height: auto;
object-fit: contain;
}
@media screen and(max-width: 450px) {
.container {
flex-direction: column;
}
}

<div class="container">
<div class="column">
<a href="path1"
><img
src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
alt=""
/>name1</a
>
</div>
<div class="column">
<a href="path2"
><img
src="https://t1.thpservices.com/previewimage/gallil/bbd632f2f8bb5df1c8f8aba51a0ef5dd/esy-008887292.jpg"
alt=""
/>name2</a
>
</div>
</div>