Scale Up and Crop an Image WordPress [code snippet]

  • read
  • Add to Flipboard Magazine.

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.

Bootstrap 4 books - learn responsive web design for beginners

The Bootstrap 4 Quick Start

Learn More

Advertise Here

Written by: Jacob Lett - Jacob is an experienced website designer and developer who specializes in building HubSpot CMS themes. He helps Industrial companies optimize and leverage their website for awareness, lead generation, and branding.
Category: Code Snippets
Tags: , ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Bootstrap 4 books - learn responsive web design for beginners

Want a Bootstrap Reference Book?

Learn More

Advertise Here