Scale Up and Crop an Image WordPress [code snippet]

  • read

code snippet

In WordPress you may need to increase the size of all thumbnails but WordPress does not res up the images to prevent distortion. Using the method outlined in this example you can use object-fit to make undersized images fit your desired aspect ratio. .img-crop__polyfill image is sized to the desired dimensions. This will help keep the aspect ratio the same for undersized images.

HTML

CSS

Resize your browser window to see how the undersized image fits the container.

See the Pen
Responsive Image Crop Using a Polyfill Image
by Jacob Lett (@JacobLett)
on CodePen.

Written by: Jacob Lett - Jacob is a marketing and web design consultant who helps manufacturers grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Code Snippets
Tags: , ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Advertise Here