Single Product Image Zoom In and Then Zoom out

Hello XTEMOS support team, I am having issue with the single product image zoom in and then zoom out , Whenever the product page loaded at first time , the image is zoomed in as shown in the video i uploaded, How can i fix that ?

Thanks in advance

Attachments:

You must be logged in to view attached files.

Hi bk5,

Thanks for reaching to us.

This problem is caused by your Custom Code https://prnt.sc/0pMhSq8rxcDi In order to solve it, please remove all your custom code related to the main gallery of the single product page.

Regards,

Thank you Hung for the clarifications, The issue is when I remove my custom CSS the Image shows full size and full height, I want to display the featured Image align to 400 by 400px , Is there any way I can display all the images align to 400x400px without the image zoom in at start , this is the custom css i have used

.product-image-wrap {
  width: 400px; /* Set a fixed width for the container */
  height: 400px; /* Set a fixed height for the container */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  overflow: hidden; /* Hide any content that overflows the container */
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
}

.product-image-wrap img {
  max-width: 100%; /* Ensure the image doesn't exceed the container's width */
  max-height: 100%; /* Ensure the image doesn't exceed the container's height */
  width: auto; /* Let the image determine its width to maintain aspect ratio */
  height: auto; /* Let the image determine its height to maintain aspect ratio */
  object-fit: contain; /* Fit the image inside the container without cropping or zooming */
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
  display: block; /* Ensure the image behaves as a block element */
}

.product-image-thumbnail.slick-slide {
  width: 80px; /* Set a fixed width for the thumbnail */
  height: 80px; /* Set a fixed height for the thumbnail */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  overflow: hidden; /* Hide any content that overflows the thumbnail */
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
  position: relative; /* Set the container as relative for absolute positioning of box-shadow */
}

.product-image-thumbnail img {
  width: 100%; /* Make the thumbnail image fill the thumbnail's width */
  height: 100%; /* Make the thumbnail image fill the thumbnail's height */
  object-fit: contain; /* Fit the thumbnail image inside the thumbnail without cropping or zooming */
  display: block; /* Ensure the thumbnail image behaves as a block element */
}

/* Default style for the image thumbnail */
.woocommerce-product-gallery .wd-v-thumb-custom .product-image-thumbnail img {
    border: 1px solid #f1f1f1;
    width: 110px;
    border-radius: unset;
}

/* Media query for screens with a width of 1366px and below */
@media (max-width: 1366px) {
    .woocommerce-product-gallery .wd-v-thumb-custom .product-image-thumbnail img {
        width: calc(100% - 2px); /* Reduce the width to fit within the container minus 2px for the border */
    }
}

Hi bk5,

You can adjust the product image via Theme Settings > Single product > Images > Product image width.

https://prnt.sc/Rtq8RQ8IapRH

Also, the product images can be configured through Appearance > Customize > WooCommerce > Product Images.

https://prnt.sc/jZDNBFImKArY

You can read more here https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

Regards,

[Author]

Posts