I currently have an image 1,000 x 230 that is being displayed in an Image Viewer web part. This issue is that content in the right zone is getting cutoff for some screen resolutions. How can I resize an image in an image viewer web part dynamically so it fits the contents of the screen?

Any help would be greatly appreciated! Thank you! ~Adam

1 Answer 1


There's no built-in option for that. You might add some CSS to change the height and width options. You could add the CSS to a Content Editor Web Part.

  • View the page with the image.
  • Press F12 to display the F12 tools pane.
  • Click "Inspector" or "DOM Explorer" tab. (name varies by browser)
  • Click the little arrow Select Element icon.
  • Click the image in your page.
  • In the F12 pane look for "<img id=" and note the name of the ID. Something like "MSOImageWebPart_WebPartWPQ7". (The number at the end will vary.)
  • Add the following CSS. (could be to a Content Editor Web Part or an edit to the page in SharePoint Designer.)

    #MSOImageWebPart_WebPartWPQ7 { width:100%; height:100%; }

You could also add a Content Editor Web Part instead of the image web part and just add the HTML for the image tag and a style:

<img src="https://yourServer/sites/yourSite/someLibrary/mypicture.jpg" style="width:100%;height:100%" >

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.