[Bug]: Image reshaping on card elements

[ZhenShuo2021]

Issue Check

• I have checked existing Issues and I feel this bug has not been raised

Hugo Version Check

• My Hugo version is within the supported range

Describe the Bug

#2455 changes all card images from <div ... style="background-image: {{ url }}"> to <img class="object-cover"> tags to enable lazy loading. However, this causes the image to reshape during the initial load.

1. This issue occurs only in Chrome, not in Firefox or Safari.
2. This issue does not always occur in local development, and disabling cache or throttling does not reproduce it.
3. It always occurs on the remote site.

This issue appears to be an object-fit issue in Chrome. Toggling on Disable cache in the Network panel of Chrome Developer Tools fixes this problem, so this should be a cache issue.

To Reproduce

Visit the deploy review of v2.91.0 in https://deploy-preview-2481--snazzy-dango-efb2ec.netlify.app/.

Expected Behaviour

No flicker.

Screenshots

No response

Platform

• OS: MacOS
• Browser: Chrome
• Version: 141.0.7390.66

Hugo Version

Unrelated.

Blowfish Version

v2.91.0

Additional Context

This page also uses object-cover method but has no flickering issue.

Code of Conduct

• I agree to follow this project's Code of Conduct