Jump to content

Responsive images (object fit)

Recommended Posts

Site URL: https://spinach-keyboard-w7ws.squarespace.com/parallell-forum

Hello!

 

Is it possible to use the CSS "object fit" command (or similar) in Squarespace?

I would like to have the images on this page in landscape mode (wide) on desktop, but cropped into portrait or square ratio on mobile.

There reason I want this, is that the images works best in landscape mode (wide) on desktop, but they gets too small on mobile.

- The first attached image is how it looks on desktop. And I'm happy with this.

- The second attached image is how it looks on mobile. I'm not happy with this.

- The third attached image is how I would like it to be on mobile (cropped)

 

I will be very happy if this is possible!

Screenshot 2021-03-09 at 13.53.11.png

Screenshot 2021-03-09 at 13.49.19.png

Screenshot 2021-03-09 at 13.51.06.png

Edited by Erlend-fs
Link to comment
12 minutes ago, Erlend-fs said:

Site URL: https://spinach-keyboard-w7ws.squarespace.com/parallell

Hello!

 

Is it possible to use the CSS "object fit" command (or similar) in Squarespace?

I would like to have the images on this page in landscape mode (wide) on desktop, but cropped into portrait or square ratio on mobile.

There reason I want this, is that the images works best in landscape mode (wide) on desktop, but they gets too small on mobile.

- The first attached image is how it looks on desktop. And I'm happy with this.

- The second attached image is how it looks on mobile. I'm not happy with this.

- The third attached image is how I would like it to be on mobile (cropped)

 

I will be very happy if this is possible!

Screenshot 2021-03-09 at 13.53.11.png

Screenshot 2021-03-09 at 13.49.19.png

Screenshot 2021-03-09 at 13.51.06.png

I saw it scale well here, did you got it solved

image.png.acdd1b84513cead814fa124eb8fe3abc.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 minutes ago, Erlend-fs said:

Hello bangank, and thank you for your reply.

While waiting, I made a copy of the site, where I uploaded images in another aspect ratio (that will fit better on mobile - but not on desktop)

 

So my question still exists, but you can use this link instead:

https://spinach-keyboard-w7ws.squarespace.com/parallell-forum

 

 

So object-fit is available (it's a css property), but the actually height of the image is controlled by the it's padding-bottom attribute (based on the image original dimension, so you can override it on mobile like so. There are several approach I would like to show so others with same issue can follow 

You can use this extension to detect the unique id of each section/block

Squarespace ID Finder - Chrome Web Store (google.com)

For invidual image block set up, 

/* image 1*/
#block-bd1b866d38f16845c425 .image-block-wrapper {
  padding-bottom: 150% !important;
}
#block-bd1b866d38f16845c425 .image-block-wrapper img {
  object-fit: cover;
}
/* image 2*/
#block-ed0ac70d30acf00817a0 .image-block-wrapper {
  padding-bottom: 150% !important;
}
#block-ed0ac70d30acf00817a0 .image-block-wrapper img {
  object-fit: cover;
}

To change the whole section's image

section[data-section-id="6047732cb406206d363532ab"] .image-block-wrapper {
  padding-bottom: 150% !important;
}
section[data-section-id="6047732cb406206d363532ab"] .image-block-wrapper img {
  object-fit: cover;
}

To change the whole's page image

#collection-6047732cb406206d363532a5 .image-block-wrapper {
  padding-bottom: 150% !important;
}
#collection-6047732cb406206d363532a5 .image-block-wrapper img {
  object-fit: cover;
}

To apply site-wide image

.image-block-wrapper {
  padding-bottom: 150% !important;
}
.image-block-wrapper img {
  object-fit: cover;
}

image.thumb.png.74b41b3be53112a798744c9694e8be59.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.