Thu, 2021-07-22 10:15
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.
I tried posting this in the beginners forum but it hasnt been correctly answered there.
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;
}
Someone suggested:
object-fit: cover;
width: 100%;
height: 250px;
But this just shows the images one above the other only cropped to 250px high (if they are at least that high already) it doesnt show square thumbnails...
The image is a screenshot of the output of my original CSS at the top of my post
Can someone urgently help please?
| Attachment | Size |
|---|---|
| Screen Shot 2021-07-22 at 11.13.02.png | 328.66 KB |
