如何让包含60%宽度图片的父元素宽度与图片一致？

默认将图片宽度设为100%时，父元素与图片宽度匹配；但把图片宽度改为60%后，图片宽度缩小到容器的60%，父元素却仍保持100%宽度。由于图片需要保持比例，只能用百分比设置宽度，不能使用px、vw等固定单位，现需实现父元素宽度与缩放后的图片宽度一致。

HTML结构 #

<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>

已尝试但无效的CSS方案 #

方案1：Flex布局 #

.casing__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.casing__item > div {
    width: auto;
}
.casing__item img {
    width: 60%;
}

方案2：Table布局 #

.casing__item {
    display: table;
}
.casing__item > div {
    display: table-cell;
    vertical-align: middle;
}
.casing__item img {
    width: 60%;
}

可行解决方案 #

方法1：Inline-block + Fit-content #

利用width: fit-content让父元素收缩到内容宽度，配合inline-block避免默认块级占满宽度：

.casing__item {
    display: inline-block;
    width: fit-content;
    vertical-align: middle; /* 可选：垂直对齐元素 */
}
.item__icon img {
    width: 60%;
}

方法2：Inline-flex布局 #

将父元素设为行内弹性盒，同时让图片容器收缩到图片实际宽度：

.casing__item {
    display: inline-flex;
    align-items: center; /* 垂直居中图标与文字 */
    gap: 8px; /* 可选：图标和文字间的间距 */
}
.item__icon {
    width: fit-content;
}
.item__icon img {
    width: 60%;
}

方法3：Grid布局 #

用行内网格布局让父元素自适应内容宽度：

.casing__item {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 8px;
}
.item__icon img {
    width: 60%;
}

原理说明 #

之前的Flex方案无效，是因为display: flex的元素默认是块级元素，宽度会占满父容器，即使子元素缩小，父元素仍保持100%宽度；Table方案则是因为图片的60%宽度是相对于item__icon（table-cell），而table-cell的宽度计算形成循环依赖，导致父元素无法正确收缩到图片宽度。

内容的提问来源于stack exchange，提问作者siepaw