Correct Portrait Aspect Ratio

[rogerjet]

Hi,

I am using the Dawn theme, when I select Portrait image ratio for Product card, the ratio according to the documentation supposed to be 2:3 but in fact it is not it is less than that.  So it is causing my images to be cropped when I dont want them too.

my website is swaace.com.au

In the screen shot above the left image is default portrait for the Theme, on the right i have forced that to 2:3 or 150%.

I dont know what to change to force all the images to be the 2:3 ratio.

Hope Someone has a solution for me.  I'm sure it wont be difficult just need to know what code to change.

Thanks

[Tech_Coding]

Hello @rogerjet 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  img.motion-reduce {
      object-fit: contain !important;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[rogerjet]

Hi thanks for the reply but that is not what I want as that display the images at whatever size they are so if the images are not all 2:3 then they are all different.

[BSSCommerce-B2B]

@rogerjet ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.product-card-wrapper  .card__inner {
   height: 100%!important
}
</style>

Before:

After:

If it helps you, please like and mark it as the solution.

Best Regards 😍

[rogerjet]

Thanks but that doesnt correct the aspect ratio in your example you can see the images are not all the same size.

[BSSCommerce-B2B]

@rogerjet, try adding this before </body>

<script>
function setHeightForCards() {
  const cards = document.querySelectorAll('.card__inner');
  cards.forEach(card => {
    const width = card.offsetWidth;
    card.style.height = (3 / 2) * width + 'px';
  });
}
window.addEventListener('DOMContentLoaded', setHeightForCards);
window.addEventListener('load', setHeightForCards);
window.addEventListener('resize', setHeightForCards);
</script>

[rogerjet]

Sorry but that did not work either the aspect ratio still is not 2:3

[BSSCommerce-B2B · Accepted solution]

Use this one

<script>
function setHeightForCards() {
  const cards = document.querySelectorAll('.card__inner');
  
  cards.forEach(card => {
    const width = card.offsetWidth;
    card.style.height = (3 / 2) * width + 'px';
  });
}

document.addEventListener('DOMContentLoaded', setHeightForCards);
window.addEventListener('load', setHeightForCards);
window.addEventListener('resize', setHeightForCards);
window.addEventListener('scroll', setHeightForCards);
</script>

result: https://www.loom.com/share/3c316b9194fe4c08acfa2dff1e84106a

If it helps you, please like and mark it as the solution.

Best Regards 😊

[rogerjet]

Thank you so much...really fixed all my images across the site.  Strange that the Dawn theme is supposed to have portrait as 2:3 ration but is not.