Preview List images don't scale or resize

Hi,

I’m using Teaser List (as per instructions), however the images (logos) don’t resize or scale in the image display.

No matter what image style I select, the only thing that changes is the resolution of the logo. Its size does not change within the boundaries set by the Teaser.

Samples showing the sizing issue (zero scale or resize no matter):
480px


220px

Page/site is https://openlab-cn-may.web.cern.ch/about/our-collaborators

I have no Override Theme in place, this is the vanilla out-of-the-box set-up. I saw a similar issue from 2020 here, but I rather hoped this had been integrated into the standard theme by now.

Thanks for any pointers.
-cath

Hey @noble,

Having read this post, I understand how annoying the process is. To make it simple and achieve what you require for, I would suggest to avoid using of “Display Formats” (Teaser list in this case) and opt for other alternatives which would helps us designing the content in a custom manner.

Here is an example where I have used a Text component in a Landing Page content type and have used some basic CSS to customise the images and text for the Collaborators on your website. This allows me to have control over the image size, resolution and other image and text properties.

Refer to this Screenshot from my test site :

The advantage we can get using a normal text component over a using a view or display format is that it gives us control over the text and image properties that we set depending upon our requirements. Referring to the screenshot above, I have used varying image properties of width, height, position, padding etc. for the 3 of them.

I hope this helps. In case you require any further help with this or creating of the custom CSS, feel free to write us back here.

Regards,
Prakhar

(just in addition to the above, @noble, this is another case where ensuring similar image dimensions makes life much easier)

Exactly, as @joachim mentioned you need to have all images for the collaborators with same size, dimensions etc.

What you currently have are images from varying size and dimensions. Example: Intel (3KB - 100x100), Oracle (43KB - 3796 × 893).

I hope this helps.