Question 397636 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – How to keep the Image in square shape in any screen dimensions

I am stuck in image dimension change on-screen responsiveness.
I have 4 products with images in one row. I wanted Images in square shape so I gave them the fixed height and auto width. they were looking good, but when I changed the screen dimensions/responsiveness, they ignored the fixed height and malfunctions.

Full-screen

In full screen, there is the default width assigned to each product of 25%. The images look square.

enter image description here

Different smaller dimensions.

In different screen dimensions, they do not follow the square shape.

enter image description here

enter image description here

What do I need?

I need them in a square shape, regardless of the screen dimensions, for example, if they were 300×300 on full screen, they should be at least 200×200 on small screen, and so on.

Is there any way we can calculate dynamically, the dimensions of images according to the the screen dimensions in CSS?

Code

/* css here */
<div class="bee-col-items" style="width:25%">
  <div class="bee-product-inner" style="border: 1px">
    <div class="bee-product-image" style="position:relative; height:332px; width:auto;"> <img style="object-fit:fill; width:100%; height:100%; " src="" />
    </div>
  </div>
</div>

I need your help regarding this. Thanks in advance.

Tags:

2

Answers


  1. 0

    Doing the aspect ratio trick with css will work for this. For a square using aspect ratio 1:1 is good. See below.

    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

.aspect-ratio {
  width: 200px; /* set any width and it will maintain 1:1 (aka square) */
  position: relative;
  overflow: hidden;
}
.aspect-ratio::before {
  content: '';
  display: block;
  padding-top: 100%; /* aspect ratio 1:1 */
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    <div class="aspect-ratio">
  <img src="https://placehold.co/600x400" alt="Placeholder Image" />
</div>

    padding-top is the main one for the aspect ratio. if set to 100% it will mean that for width of a length, height will also be that length, if you change the 100% to something else, you maintain a different ratio.

    Login or Signup to reply.
  2. 0

    You could use css grid or flex, and use aspect-ratio and object-fit to display the images as squares regardless of their size.

    Here’s an example:

    .img-container {
  width: 100%;
  background-color: lightgrey;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center center;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="img-container">
        <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8">
        <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8">
        <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8">
        <img src="https://plus.unsplash.com/premium_photo-1720886073981-f975d3dc93f8">
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search