Finzie

Test Blog

test-blog

Added object-cover: This CSS property ensures the image covers the container without stretching, maintaining its aspect ratio.

Added overflow-hidden to the container (div.thumbnail): This ensures that if the image exceeds the container’s dimensions, the overflow is hidden (useful if you're using object-cover and some parts of the image are cropped).

w-full and h-full for the image: This ensures the image fills the container's width and height.

This will prevent the image from stretching and will display it with the correct aspect ratio. If you want the image to fully fit inside the box without cropping (but potentially leaving empty space), you can replace object-cover with object-contain.

© 2024 Finzie.

Lets start building your
success story today.