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!