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.4秒内重新计算百分比大小。

尝试过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％；即使是高度在变化。