3 replies [Last post]
TheWebDesignCompany
TheWebDesignCompany's picture
Offline
newbie
Southend on Sea
Last seen: 1 week 3 days ago
Southend on Sea
Timezone: GMT+1
Joined: 2014-04-16
Posts: 7
Points: 10

having an issue with getting images to display as squares in 1:1 aspect ration on wordpress.
Im pulling in Woocomece gallery images and displaying them on the page.

However as you can see in the attached screenshot the object-fill: cover; or object-fill: fill; or even object-fill: none; is not working.
They are all being treated like object-fill: contain; but I need to show square thumbnails for images of all different aspect ratios.

Here is the code I am currently trying to use:

.woocommerce-product-gallery__image {
border: solid 5px #CCC;
background-color: #CCC;
object-fit: fill;
object-position: center center;
max-width: 900px;
height: 250px;
width: 250px;
overflow: hidden!important;
float: left;
margin-right: 20px;
margin-bottom: 40px;
}

Can someone urgently help please?

AttachmentSize
Screen Shot 2021-06-30 at 15.27.19.png805.76 KB
TheWebDesignCompany
TheWebDesignCompany's picture
Offline
newbie
Southend on Sea
Last seen: 1 week 3 days ago
Southend on Sea
Timezone: GMT+1
Joined: 2014-04-16
Posts: 7
Points: 10

Does no one here know?

Does no one here know?

samuxip
samuxip's picture
Offline
newbie
USA
Last seen: 1 week 6 days ago
USA
Timezone: GMT+5.5
Joined: 2021-07-19
Posts: 2
Points: 2

I've struggled with this

I've struggled with this problem quite hard, and eventually arrived at this simple solution:

object-fit: cover;
width: 100%;
height: 250px;

You can adjust the width and height to fit your needs, and the object-fit property will do the cropping for you.

TheWebDesignCompany
TheWebDesignCompany's picture
Offline
newbie
Southend on Sea
Last seen: 1 week 3 days ago
Southend on Sea
Timezone: GMT+1
Joined: 2014-04-16
Posts: 7
Points: 10

Hi, I just checked back and

Hi, I just checked back and saw your reply, thank you for your efforts, but that doesnt work either.

It simply displays the image full width and then puts them one above the other.
I added the border and the background again to see what is happening and this is what it looks like:

AttachmentSize
Screen Shot 2021-07-22 at 10.01.36.png 810.38 KB