Dynamically shrink image viewer web part and img within

Question

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

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%" >