Chrome图像不透明度在宽度上的过渡使用百分比会导致尺寸调整

Question

这是html简化示例

<div class="big">
    <a href=".....">
        <img src=".....">
    </a>
</div>

CSS

.big {
    width: 33.3333%;
}
img:hover {
    opacity: 0.9;
    transition: opacity 0.4s;
}

当我将鼠标悬停在img上方时，不透明度过渡效果很好，但是图像在跨度为0.4s时闪烁，就像调整大小一样，就像Chrome在0.4s内重新计算百分比大小一样。

尝试过Webkit过渡，未解决任何问题。 过渡所有，仍在发生。

此问题仅在Chrome上发生，而在Firefox上则完全没有问题。 仅在使用固定宽度的百分比时会发生，但我需要在此百分比上使用百分比。

谢谢你的帮助

Answer 1

您可以尝试以下方法：

a {display: block }
a img {transition: opacity 0.4s; max-width: 100%;}
a:hover img {opacity: 0.9}

Answer 2

这就是为我解决的问题： max-width: calc(100% - 1px);

我可以离开的最大高度为100％； 即使是高度在变化。