Modern Page Image Web Part

Question

Modern Page Image Web Part

NeddyFlanders 96

I am adding an image web part on a Modern Page in SharePoint Online. It is three columns and I will have an image in each column. It works fine except I can't get each image to show 100% in the column. It cuts off like 15% on each site (showing white space). I've tried enlarging the image, trying to drag the image wider (which doesn't work) and even CSS. For some reason if I use Developer (F12) it goes to correct size but when I refresh it again reduces the image size. Any help would be appreciated. Thanks.

1 answer

Your answer

Answer 1

RaytheonXie_MSFT 40,496 Microsoft External Staff

Hi @NeddyFlanders ,
I created a three columns section and add each section a image webpart. And the page shows the image fine like following

Could you provide us screen shot about the wrong display, and the steps you create image web part. This will help us to reproduce your issue and test further.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

RaytheonXie_MSFT 40,496 Reputation points Microsoft External Staff

2022-06-08T09:30:17.243+00:00

Hi @NeddyFlanders ,
Have you tried the solution I proposed?

If you have any questions or progress, you can contact me in time.

Looking forward to your reply

Have a lucky day!

Thanks,
Raytheon Xie
NeddyFlanders 96 Reputation points

2022-06-08T12:56:46.233+00:00

Hi Raytheon, the images do show up fine

The problem is we need the image to stretch 100% in the column. Instead we are getting alot of white space on either side of the image. I tried to attach a lower view of two of the images so you can see. In Chrome it initially comes up correct then a refresh resets it to show white space again. In Firefox it always shows white space on either side of each image.

I think your images are showing the same thing (white space on either side of images) but tough to tell without a border.
NeddyFlanders 96 Reputation points

2022-06-08T12:58:47.877+00:00

Hi Raytheon, I think the images I uploaded cut of the rest of my statement. They show up fine but are still showing too much white space on either side of the images. Tried stretching images to make them wider but no effect. I need each image to extend to the column border. Even with css the browser on refresh resets it to show the white space.
RaytheonXie_MSFT 40,496 Reputation points Microsoft External Staff

2022-06-09T08:57:24.7+00:00

Hi @NeddyFlanders ,
Per my research, I found it turns out to be a by-design one. Modern pages and web parts are designed to be fully responsive across devices, meaning that images used in web parts will scale differently depending on where they are shown, which layout is used, and the device on which they are being viewed. For more details you can refer to following document
https://support.microsoft.com/en-us/office/image-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d
RaytheonXie_MSFT 40,496 Reputation points Microsoft External Staff

2022-06-13T05:43:04.017+00:00

Hi @NeddyFlanders ,
Would you tell me whether your issue has been resolved or have any update?
I am looking forward to your reply.

Have a nice day!

Thanks,
Raytheon Xie

Share via

Modern Page Image Web Part

1 answer

Your answer