This is the default appearance with all images set to 100% width:
These images must maintain their aspect ratio, so I can only use percentages for sizing.
When the image width is set to 60%, it looks like this:
The images have 60% width but the parent element still occupies 100% width.
How can I make the parent element match the width of the image?
<div class="casing">
<div class="casing__item">
<div class="item__icon"><img src="PK.png"></div>
<div class="item__label"><span>PK</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="PK-PW2.png"></div>
<div class="item__label"><span>PK+PW2</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="PK2W-PW2.png"></div>
<div class="item__label"><span>PK2W+PW2</span></div>
</div>
</div>
I have tried the following:
.casing__item {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.casing__item > div {
width: auto;
}
.casing__item img {
width: 60%;
}
.casing__item {
display: table;
}
.casing__item > div {
display: table-cell;
vertical-align: middle;
}
.casing__item img {
width: 60%;
}