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％； 即使是高度在變化。