Jump to content

Prevent image block from cropping: Just do the normal HTML img tag thing!

Recommended Posts

Hi gang, hopefully someone can help me with this because it feels like I must be overlooking something obvious.

I'm trying to add my logo to a page on my website (aside from in the header). But Squarespace keeps cropping the image to "fit" in my "layout." For photography, I can see why this would be a useful feature. But I would much rather my logo scale down than get the words cut off! I know I can just adjust the little crop handlebar to make it fit perfectly on desktop, but there's nowhere I can place it where it works at all screen sizes. 

In regular HTML, if I place an image on a page and tell it "your width is 100% of the space available", it will scale the height appropriately and preserve the aspect ratio. That's all I want it to do here!

I looked at overriding this with CSS in a code block, but it seems squarespace actually adds the image width and height cropping information in an inline style. So that won't work.

I could put the <img> tag in a code block, I suppose, but I'm trying to learn to do things "the squarespace way", and I like that with the image block I get access to the other tools (animations, captions, et cetera). I really feel like there must be something I'm not seeing. 

Help me out!

Clara

 

(Edited to add: I just added a "Logo Wall" block to my site to see if maybe that block would reveal the secret settings for "never crop this image, this image is not a photograph, this image is 100% content and cropping it would be a mistake". Except the sample images they uploaded just have a ton of transparent padding, and that's how they've gotten around this problem. Maybe that's what I have to do too? But it seems wildly inefficient!) 

Link to comment
  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Okay, I think I've got the solution. I changed the Image block type from "Inline" to "Stacked", then added the following custom CSS:

.sqs-block-image .image-overlay {
  opacity: 0;
}

... to remove the faint overlay on the image. Seems to be working! But also, still hoping there's a better way to do it haha

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.