Image Ratio Distortion Fix at 200% Zoom
Published:
The requirement was to find and fix pages that distorted images when zoomed to 200%.
After investigating the HTML code, it was found that overlapping images with “object-fit: contain” (the default) caused the aspect ratio to change on zoom. Changing this to “cover” prevented the distortion.
By the next day, a Python script was created that scanned through all HTML files to identify images, then searched through all CSS files for those same images. If the “object-fit” attribute was unassigned, the script automatically changed it to “cover”.
This automatically fixed all image aspect ratio distortions across every web page.