Protiviti / SharePoint Blog

SharePoint Blog

December 06
Responsive Image Display Tips

 

After an image file has been properly prepped (https://sharepoint.protiviti.com/blog/Lists/Posts/Post.aspx?ID=150) for uploading to a SharePoint picture library, the next step is to display the image on a web page.

The SharePoint ribbon’s Image editor provides control over basic properties, but it falls short of options for responsive image displays.

 

By using Edit Source mode, however, you can easily add a few styling attributes that will make your image display more fluid. A familiarity with HTML and CSS is useful, but you don’t need advanced knowledge to implement these small changes.

 

Percentage Widths

When an image is first inserted in the page content area, it is sized to fit the available width, plus a 5px margin all around it (Horizontal/Vertical Space). The HTML code for this set of properties looks like this:

<img src="/sitename/PublishingImages/caterpillar.png" alt="" style="margin: 5px; width: 940px; height: 705px;"/>

Unfortunately, this fixed-pixel setting for width and margins will not scale on smaller devices such as tablets and smart phones. When the photo exceeds the page width, users will be forced to scroll horizontally.

 

By changing the width to 100% instead of a specific pixel value, the image will scale up and down as needed. The 5px white space can be kept for the top and bottom margins, but it should be set to 0 for the sides so the image doesn’t exceed 100% (width + margin).

<img src="/sitename/PublishingImages/caterpillar.png" alt="" style="margin: 5px 0; width: 100%; height: auto;" />

If you don’t want to fill the entire width of the screen, the percentages for width and margins can be adjusted. For instance, you can style the image with a width of 80%, plus a side margin of 10% for a total of 100% (left margin + width + right margin). This centers the image on the page.

<img src="/sitename/PublishingImages/caterpillar.png" alt="" style="margin: 5px 10%; width: 80%; height: auto;" />

 

Min-Width

To ensure that your image doesn’t scale down too small, you can add a minimum width value to your style attributes. In this scenario, the image will scale for 80% of the screen width until the image is reduced to 320px, but it will not scale below that size. On a smart phone, the image would display closer to 100% of the screen.

<img src="/sitename/PublishingImages/caterpillar.png" alt="" style="margin: 5px auto; width: 80%; height: auto; min-width:320px;"/>

Max-Width

Conversely, you can set a maximum width for the image display to prevent it being enlarged so much that the quality degrades. This image will take 100% of the content area until it reaches 800px, at which point it will display centered on the screen no matter how wide the content area around it may be.

<img src="/sitename/PublishingImages/caterpillar.png" alt="" style="margin: 5px auto; width: 100%; height: auto; max-width: 800px;"/>

Testing your specs

To confirm that your image responds fluidly to a variety of situations, you can use these testing scenarios:

  • Increase page zoom to 125% and 150%
  • Decrease page zoom to 75%
  • Minimize your browser window to simulate tablet and mobile phone widths

If the image scales to fit the appropriate spaces, then you’re all set for a smoothly responsive web page.

 

Quick Launch


© Protiviti 2018. All rights reserved.   |   Privacy Policy