Menu is a set of tiles. Tiles are the same size -- 10rem x 10rem. Each tile has an image and a caption. Caption sits at the bottom of tile. Image takes all the rest of free space and should be scaled down proportionally to fit available space (green frame).
Menu is flex with row direction. Tile is flex with column direction.
The problem -- image is not scaled down... I have tried to solve the problem, but didn't find a good solution.
Do you have any ideas on how to fix that?
See jsfiddle:
https://jsfiddle.net/mhtLjw6x/
<!DOCTYPE html>
<html>
<head>
<style>
.set-of-many-tiles {
display: flex;
flex-direction: row;
}
.whole-tile {
margin: 1rem;
padding: .5rem;
border: 1px dashed red;
width: 10rem;
height: 10rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.caption {
flex-grow: 0;
text-align: center;
margin-top: 0.5rem;
}
.icon {
flex-grow: 1;
border: 1px dashed green;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="set-of-many-tiles">
<div class="whole-tile">
<div class="icon">
<img src="https://picsum.photos/800/200">
</div>
<div class="caption">
Image size is 800x200px
</div>
</div>
<div class="whole-tile">
<div class="icon">
<img src="https://picsum.photos/50">
</div>
<div class="caption">
Image size is 50x50px
</div>
</div>
<div class="whole-tile">
<div class="icon">
<img src="https://picsum.photos/800/200">
</div>
<div class="caption">
Image size is 800x200px, but caption is very very very very long
</div>
</div>
<div class="whole-tile">
<div class="icon">
<img src="https://picsum.photos/500/1000">
</div>
<div class="caption">
Image is tall, not wide, 500x1000px
</div>
</div>
</div>
</body>
</html>
