Title: Square image inside rectangle box Last modified: February 10, 2024 --- # Square image inside rectangle box * Resolved [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/) * Hi, * I’m using square images, I want the image’s height to fit exactly to the height of the rectangle box in the listing in modern grid mode – I mean square image in a rectangle box, * There will be some empty white space to the right and left sides of the image inside the rectangle. * Can you please help me with this? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsquare-image-inside-rectangle-box%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 10 replies - 1 through 10 (of 10 total) * Thread Starter [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17416586) * and if there is a way to change the color of the empty space to the right and left sides of the image within the rectangle, that would be great. * Plugin Author [ndre](https://wordpress.org/support/users/ndre/) * (@ndre) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17417640) * Hi [@oneray](https://wordpress.org/support/users/oneray/), * You have to set the modern grid image size in WordPress Settings > Media. * Please also check: [https://implecode.com/docs/ecommerce-product-catalog/modern-grid-with-square-images/](https://implecode.com/docs/ecommerce-product-catalog/modern-grid-with-square-images/) * Thread Starter [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17418292) * I’ve changed the settings in Media page. for the “Modern Grid Image” to: * Max Width: 294 Max Height: 185 * Now the height of the image fits inside the height of the rectangle, but the image is stretched horizontally !! * Is there anyway to show the square image centered within the rectangle box ? * like this >> [https://ibb.co/Zd6VWqv](https://ibb.co/Zd6VWqv) * and if there is a way to change the color of the empty white space to the right and left sides of the image within the rectangle, that would be much better. - This reply was modified 2 years, 3 months ago by [oneray](https://wordpress.org/support/users/oneray/). * Plugin Author [ndre](https://wordpress.org/support/users/ndre/) * (@ndre) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17420624) * Hi [@oneray](https://wordpress.org/support/users/oneray/), * If you need it to be a rectangle you have to set the same width and height. Please make sure to regenerate thumbnails after you change the image size. * Please try 292px width and 292px height or 250×250 (like your uploaded image size) and change the items per row to 3. * You also have to follow this guide: [https://implecode.com/docs/ecommerce-product-catalog/modern-grid-with-square-images/](https://implecode.com/docs/ecommerce-product-catalog/modern-grid-with-square-images/) * Thread Starter [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17422334) * This didn’t work, and I want 2 rectangle items per row, not 3 !! * Thread Starter [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17423178) * Well, nevermind. I will use rectangle product images. * Thanks again. * Plugin Author [ndre](https://wordpress.org/support/users/ndre/) * (@ndre) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17430159) * If you want to have two per row you have to set the width and height to 293px in WordPress Settings > Media. * Thread Starter [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17434243) * I’m using rectangle image now, 316 x 200 px for individual product images, in WordPress Settings > Media**, **in “Modern Grid Image” I’m using the same numbers: 316 x 200 * Haven’t changed the “Catalog Single Page Image”, it is set to: 600 x 600 .. * should I change anything here, or is this the correct setting? * Plugin Author [ndre](https://wordpress.org/support/users/ndre/) * (@ndre) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17435687) * The grid box, which is like a frame or a container for an image, is set to be a certain size. In your theme, it’s 296 pixels wide and 187 pixels tall. * To make the image fit nicely into this grid box, you should ideally make it the same size as the grid box, which is 296 pixels wide and 187 pixels tall. * This should be your settings in WordPress Settings > Media. * However, when you’re uploading the image, it’s recommended to use a larger size, but keep the same proportions. This means if you increase the size of the image, make sure to keep the width to height ratio the same. For example, if you double the width, you should also double the height to maintain the same aspect ratio. * Thread Starter [oneray](https://wordpress.org/support/users/oneray/) * (@oneray) * [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17438650) * Done. Thank you. Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Square image inside rectangle box’ is closed to new replies. * ![](https://ps.w.org/ecommerce-product-catalog/assets/icon-128x128.png?rev=1103243) * [eCommerce Product Catalog Plugin for WordPress](https://wordpress.org/plugins/ecommerce-product-catalog/) * [Frequently Asked Questions](https://wordpress.org/plugins/ecommerce-product-catalog/#faq) * [Support Threads](https://wordpress.org/support/plugin/ecommerce-product-catalog/) * [Active Topics](https://wordpress.org/support/plugin/ecommerce-product-catalog/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/ecommerce-product-catalog/unresolved/) * [Reviews](https://wordpress.org/support/plugin/ecommerce-product-catalog/reviews/) * 10 replies * 2 participants * Last reply from: [oneray](https://wordpress.org/support/users/oneray/) * Last activity: [2 years, 3 months ago](https://wordpress.org/support/topic/square-image-inside-rectangle-box/#post-17438650) * Status: resolved