Flex item size from background image - html

Question

there is a flexbox with flex items
every flex item should be shown as a clickable folder with particular text in it
as far as I understand, the only way to achieve that via CSS is to have a background image
The problem is that I want to get the following as well:
Constraint every flex item, ideally only by the width, e.g. max-width: 20% (to show it nicely on mobile)
Let flex items automatically expand their width/height to show a complete background image (preserving the constraint above)
Unfortunately, was unable to find a right combination of params for that, so far it looks like this:
<div class="container">
<div class="column">
name1
</div>
<div class="column">
name2
</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;
This doesn't achieve the goal - looks like every item is large enough just to cover nested <a> and they don't care about background there, so, they are smaller than desired.
I have an assumption that in this particular case we can hard-code the item's size as background image size, but that means that every time the background image is changed, we need to adjust the css with its new dimensions.
Is there any CSS way to force the element to grow in a way to cover its background image?

Answer 1

I think instead of adding the image in the background-image you can put it inside of the element. When you do this image will be clickable. Also if you use the style code that I wrote for the img you create a responsive image. If you want to control the image size you can play with its parent div with this way you can manage to control the width. So I suggest you give what width that you want to the .column and control your width and image problem.
.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>