preloader

Divi Portfolio Images Look Cropped or Blurry? Here Is the Solution

The Divi Portfolio module adds beautiful galleries to any website with very little effort required. But many people notice that their carefully uploaded images look completely wrong inside this module. Faces get cropped out of photos and product images appear blurry instead of sharp and clear. Divi Portfolio Images Look Cropped or Blurry?

This problem happens because the Portfolio module generates its own thumbnail sizes automatically. The module ignores the original image dimensions and creates new versions based on module settings. Those automatically generated thumbnails often do not match the aspect ratio of the original pictures. The result is a set of images that look distorted, cropped awkwardly, or pixelated beyond recognition.

Here are the three most effective ways to fix Divi Portfolio image problems.

  • Change the Image Size setting from Default to Full inside the Portfolio module options
  • Adjust the global thumbnail size in Divi Theme Options under Builder settings
  • Add custom CSS to force the module to display images using object-fit property

Here is a comparison of different image size settings in the Divi Portfolio module.

Image Size Setting What it does When to use it
Default Uses Divi’s built-in thumbnail size Works for most blog layouts
Full Displays original uploaded image When quality matters more than speed
Large Uses WordPress large image size Good balance between quality and performance
Medium Uses WordPress medium image size For thumbnail galleries and small grids

For more information about image optimization on Divi websites, visit the ShortPixel page on wpwizzy.com.

Here is the custom CSS solution for fixing cropped portfolio images.

Add this code to Divi Theme Options under the General tab in the Custom CSS field.

.et_pb_portfolio .et_pb_portfolio_item img { object-fit: cover; height: 250px; width: 100%; }

  1. Adjust the height value to match the desired thumbnail size for the specific portfolio layout.
  2. The object-fit property tells the browser how the image should fill its container box.
  3. Using cover ensures that the entire container gets filled without distorting the image proportions.
  4. Some parts of the image may still get cropped but the result will look much more professional overall.
  5. For product images where every detail matters, the Full image size setting usually works best.

Keep in mind that using Full images will increase page load time on galleries with many items. A balance between image quality and website speed must be found for each specific situation.

Keep Reading

Previous Post Divi Visual Builder Not Working on Mobile Devices? Here Is Why Next Post Divi Mobile Menu Not Opening When Tapped? Here Is the Fix

Need Help With Your WordPress Site?

If you need help with WordPress fixes, plugin issues, theme customization, or development work, feel free to get in touch.

Get a Free Estimate