Scaling Sharepoint Tiles Without Affecting Other Images

The Problem: Images Appearing Stretched or Squished

A common issue that SharePoint users face is distorted images when using the Image Viewer web part set to tile view. The images can appear undesirably stretched, squished, pixelated, or out of proportion. This occurs because SharePoint does not automatically scale the images when changing between standard and tile views in the Image Viewer web part.

By default, SharePoint renders images at their natural pixel width and height as defined in the image file. This works fine in standard view, but causes problems when switching to tile view, which displays images in a compact grid layout. The image dimensions are not adjusted to fit the tighter tile view spaces, resulting in visual artifacts.

Fixing this issue requires overriding the default SharePoint image rendering behavior specifically for the Image Viewer web part. The solution lies in using custom CSS code to scale the images appropriately within the tiles. This allows adjusting the dimensions without affecting other visual elements.

Understanding Image Web Part Rendering

To understand why images appear distorted in tile view, we need to examine how SharePoint handles image rendering in the Image Viewer web part.

By default, SharePoint outputs the raw image file through the web part without applying any scaling or processing. The image is rendered at its native pixel width and height as defined in the file properties. This works well in standard view, where there are no space constraints, and maintains maximum image quality.

However, problems emerge when users enable tile view, designed to display images in a compact grid layout. This shrinks the visible area available for each image to fit into the tiles. SharePoint still renders the images at their full native dimensions, which now exceed the tile boundaries.

The resulting overflow gets addressed differently by the browsers. Some browsers partially clip the images, cutting off sections outside the tiles. Other browsers stretch or squash the images to force them to fit, distorting the content. Both outcomes degrade the visual experience.

What we need is a way to scale the images down to appropriate sizes to fit cleanly within the tile view layouts. And the technique to accomplish this is custom CSS code.

Fixing Stretched Tiles with Custom CSS

The proper way to fix stretched and distorted SharePoint images in tile view is to use custom CSS code to apply scaling constraints specifically to the Image Viewer web part.

Here are the steps to implement the CSS fix:

1. Identify the root class for the Image Viewer web part – .ms-webpart-chrome-title
2. Create a custom CSS file for overriding styles
3. Target the web part class and apply max-width/height properties

For example:

.ms-webpart-chrome-title {
  max-width: 200px !important;
  max-height: 200px !important;
}  

This constrains all images rendered through the web part to 200px square boundaries to prevent overflow issues when tile view is activated.

The key requirements are:

• Reference class applies to Image Viewer specifically
• Set explicit pixel dimensions for width/height
• Use !important to override defaults

The values can be adjusted to tune image dimensions as needed. This CSS approach scales the images appropriately without needing to edit or replace image files manually.

Maintaining Image Quality

When scaling images through CSS, it’s important to avoid excessive quality degradation or pixelation issues. Images containing fine details could become unintelligible if resized too aggressively.

Here are some tips for maintaining image quality:

• Import images at the highest reasonable native dimensions possible
• Use common image formats like JPG, PNG, SVG for broad browser support
• Set CSS scaling constraints modestly, avoid over-shrinking images
• Cross-check pixel density as part of testing

Also examine the source image properties ahead of time to plan appropriate scaling limits:

1. Review pixel height/width in file details
2. Note image resolution and format specifications
3. Set max-width/height CSS to retain at least 50-75% of native values

Testing will reveal if compression artifacts or quality issues emerge at chosen scale settings.

Verifying Natural Image Dimensions

After implementing custom web part CSS, thorough testing is required to verify images appear correctly in tile view across the supported browsers, and standard web parts remain unaffected.

Check for these positive indicators:

• Images in Image Viewer web part scale correctly to fit tile layouts
• No visible image distortion from stretching or squishing
• Text and images in other web parts still render naturally

The test methodology should address:

1. Compare image view rendering between standard and tile modes
2. Switch contexts by testing alternate site templates and themes
3. Check cross-browser behavior: IE, Chrome, Firefox, etc
4. Validate CSS overrides limited to target web part only

Logging any defects, unexpected behaviors, or quality issues. CSS adjustments may be needed to refine the image scaling approach.

Frequently Asked Questions

Why not edit the images instead of using CSS?

Manually resizing images through photo editing software often leads to quality issues or proprietary image formats. CSS allows dynamic scaling without disrupting open formats, losing detail, or increasing storage requirements.

What are recommended dimensions for tile view?

Aim for 200×200 pixels for a balance of quality and compression. Adjust as needed based on native resolution and target screen sizes.

How can I apply this CSS fix site-wide?

Create the CSS file in the Master Page gallery or add to Alternate CSS URLs under Site Settings. Or use SPFx extensions to inject the overrides.