How to change or disable image autoscaling when the browser window is resized

Link: https://dove-goby-4gnr.squarespace.com/
Password: OCA2022PASSWORD

Hi there,

I'm trying to change the behaviour of an image on a single page of my website.

When the browser window is made smaller the logo gets resized accordingly, however this results in the logo looking too small.

Is there a code to make the logo resize not as much? If this cannot be done perhaps disabling autoscaling all together, although I'd prefer reducing the amount of resizing the logo does.

Thank you!

Ernest

You have the logo image set to "FIT" so it never exceeds the container, the logo is constrained by the height and width because you have the image block very similar size to the logo (on a wide screen it is constrained by the height, narrow screen by the width). As the viewport gets narrower the image has to scale down because the columns all get narrower.

Your solution is to adjust the width of the image block to be wider. This won't impact the size of the image as it is still constrained by the block height, but will mean that it doesn't scale when the width is reduced.

Thank you for the answer @Ziggy I tried making the image block wider but the image is still scaling the same way. 

Is there a way to disable that function all togehter?

Hmm that is interesting, try these settings for the section:

I applied these settings however there was no difference, IS there a way to disable this altogether?

I'm honestly not sure why your page is scaling the way that it is, I'm not able to reproduce what's happening. Could you try adding this Custom CSS:

section[data-section-id="63ebcb03c7739f287948e486"] {
  min-height: 420px;
}

Let me know if that helps.

I tried your code but to no avail, Here is a screen record of what I'm seeing on my end.

My problem is that the logo with OCA is getting too small, everything else is fine. 

Yes, that's what I see too. Sorry that code didn't work. 

@Ziggy Thanks for the help so far. Is there a code which could disable the autoscaling entirely for that specific image?

I don't know of a way to do that, nor do I really understand why it's doing this to the extent it is for your website. You may want to repost the question, and maybe someone else will be able to find the answer.