Square aspect ratio for thumbnail on Simple theme

[zakkyobiru]

The images on my collection page & thumbnails for individual product pages(product detail page) are still image’s original ratios that have been uploaded.

I want to crop them all to square ratio.

And I want them to trim with object-fit: cover ;.

But in the largest image of the product, I want them to square ratio but want to trim with object-fit: contain;

Or, only in this place, It may not need to trim, and it may ok that it keep the aspect ratio as original.

I don’t know until I see it …

theme.scss.liquid

Collection styles & Product template styles

/*====== Collection styles ======*/

.collection-description {
  margin-bottom: $gutter / 2;
}

.product {
  position: relative;
}

.product__image-wrapper {
  display: block;
  margin-bottom: $gutter / 3;
   position: relative;

  img {
    display: block;
    margin: 0 auto;
  }
}

.product__image-wrapper--loading {
  background-color: $color-body-text;
  @include animation(placeholder-background-loading 1.5s infinite linear);
}

.product__image {
  display: block;
  width: 100%;
  position: absolute;
  top: 0;

  &.lazyload {
    opacity: 0;
  }
}

/*====== Product template styles ======*/
.product-single__variants {
  display: none;

  .no-js & {
    display: block;
  }
}

.product-single__featured-image-wrapper {
  margin: 0 auto $gutter;
  position: relative;
  width: 100%;
}

.product-single__photos,
.product-single__thumbnails {
  a,
  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
}

.product-single__photos {
  .supports-js & {
    position: relative;
  }
}

.product-single__photo {
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

.lightbox {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.image-zoom {
  cursor: move;
}

.product-single__thumbnails li {
  margin-bottom: $gutter;
}

.product-single__meta {
  padding-top: $gutter / 2;
}

If anyone knows, please help.
I have attached the code.
Thank you.

https://zakkyobiru.myshopify.com

[zakkyobiru]

Also, thumbnail on mobile, if when there are 1,or 2 or 4 sheets the size is large, so I want to align it with when other sheets

.

Thank you.

[KetanKumar]

@zakkyobiru

can you please confirm this

[zakkyobiru]

@KetanKumar

Thank you, and yes you’re right.
The current state is too rattling and not confortable to see.

[KetanKumar]

@zakkyobiru

try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

a.product-single__thumbnail {
    position: relative;
    padding-top: 100%;
}
a.product-single__thumbnail img {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

[zakkyobiru]

@KetanKumar

Thank you, I pasted it now, but something is wrong.
Do you know the cause?

Right now, I’m leaving the site as it is.

[KetanKumar]

@zakkyobiru

i can’t see now its work

[zakkyobiru]

@KetanKumar

Well, it is displayed like this on my mobile phone and computer.
Does it look sucsess on some devices?

[KetanKumar]

@zakkyobiru

yes please add this code

a.product-single__thumbnail img {top: 0;}

[zakkyobiru]

@KetanKumar

Thank you very much and it worked.
I embedded it in the collection page in the same way, but it didn’t work.
Do you have any hints?

Or if you know the size of 1, 2 or 4 sheets, could you teach me.

Thank you in advance

[KetanKumar]

@zakkyobiru

yes please share issue images

[zakkyobiru]

@KetanKumar

Thank you, and a description of the part of this image in the bodyline reply.
How is it?
Do you need different css or html?

[KetanKumar]

@zakkyobiru

yes please add this code

.product__image-wrapper {
padding-top: 100% !important;
}
.product__image-wrapper img {
height: 100%;
}

[zakkyobiru]

@KetanKumar

Thank you so much, it’s simple but I’ve been struggling with that for a long time.

I’m sorry to hear a lot, but is it difficult for solve the 1, 2 or 4 photos in the very first comment on this page?

Thank you

[KetanKumar]

@zakkyobiru

yes please share issue images