Scaling of Image/Hyperlink Field in NewForm

[Christopher Holubarz]

Hi Alexander,

I am building a NewForm on a SharePoint Online List with Modern DFFS.
I have one problem there:

We have Images stored in a document library and we have the NewForm for the SharePoint List which is another list.
The document library is connected to the List via Lookup Column. As soon as I select a value from the lookup field, the Hyperlink field is set to the image from the document library which is working fine.

Now comes the problem:
I cannot get it up and running that the image is scaled to a fixed size without cutting it.

Do you have any suggestions for me how I can accomplish it that the image is resized to a fixed size within the form ?
I tried various CSS / JS ways but nothing seems to work.

Thank you very much in advance and BR,
Chris

[Alexander Bautz]

Hi,
I need to see some screenshots so I’m sure I understand and can try to reproduce it. You can either attach the screenshots here, or email them to me directly.

Alexander

[Christopher Holubarz]

Hi,

Sure,

Attached you can find the screenshot.

Thank you and BR,
Chris

Attachments:

1. 

   ImageScaling.png
   

[Alexander Bautz]

Thanks for the screenshot. I’ll add some new settings on the “Hyperlink and Picture” field type to let you select different sizes.

As a workaround you can add this to your custom css:

div[class^="fieldImageRenderer"] {
  width: 100%!important;
  height: 100%!important;
  max-width: 100%!important;
  max-height: 500px!important;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Alexander

[Christopher Holubarz]

Hi Alexander,

Thank you very much, this worked like a charm 🙂

I was banging my head against the wall already 😀

Thank you again.

BR,
Chris

[Author]

Posts