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

Question

Here's the html simplified sample

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

css

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

When I hover above img, the opacity transition works fine, but the image flickering on span 0.4s, it's like resizing, like the Chrome recalculate the percentage size again within 0.4s.

Tried webkit transition, not fixing anything. Transition all, still happening.

This problem only happen on Chrome, no problem at all on Firefox. Only happen when using percentage, with fixed width works fine, but I need to use percentage on this one.

Thanks for any help

Answer 1

You can try this:

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

Answer 2

This is what fixed it for me: max-width: calc(100% - 1px);

max-height I could leave at 100%; even though it was the height that was changing.