Responsive images (object fit)

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!

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!

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

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

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;
}

Thanks a lot bangank!

Hello !

Sorry to bring this old topic to life, but I'm having the same problem with a background image of a section.

section[data-section-id="659fd82786d71e4f3370c2de"] .image-block-wrapper img {
  object-fit: cover;
}

I tried using this ^, but it doesn't do anything, with or without the "!important" in the end...

Can anyone help ? The goal is to have the object-fit to CONTAIN.

The website is : https://star-squid-8hw2.squarespace.com/

pass : ***hiddin due to solution found***

The section is mainly the second one (id="659fd82786d71e4f3370c2de" - with the guy working on a huge pipe).

Thank you !

Ok, I found it !

If you want to modify the section's property for this particular thing, you have to target the section id, and not the "data-section-id". So you have to inspect the code, and find your container of the whole section (just a few lines above).

For me, this gives :

section[id="yui_3_17_2_1_1705329697048_415"] .section-background img {
  object-fit: contain;
}

That's it !

Hope this will help someone !