problem displaying images as aspect ratio 1:1 (square thumbnails)

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;

My :hover doesn't work properly, When i hover over the h2's it doesn't underline the h2

Puzzled

My home page

h1 {
text-align:center;
margin-top: 50px;
font-family: "Garamond", serif;

}

h2 {
text-align:center;
margin-top: 0px;
font-size: 15px;
font-family: "Garamond", serif;
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
float:middle;
}

header > h2 {
color: #2D52A0;
font-family: "Arial", sans-serif;
}

header > h2:hover {
text-decoration: underline;
}

.English {
position: relative;
bottom: 250px;
right: 120px;

}

black text

Hi,
I edit Wikipedia regularly and I want dark mode so it is easer on my eyes. There is no skin which does this for you there are chrome extension which do it but I find them hard to use and they also slow down my computer. You can add custom css to a skin so I added this to a skin:

body {background-color: rgb(24, 24, 24);}
.cnotice {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    margin-bottom: 1em;
    cursor: pointer;
    color: #222;
    font-weight: 500;
}

Position absolute and z-index problem in IE6

I am getting a problem with the IE6 z-index property on position: absolute. Does anyone have an idea to tack such a problem?
You can see the problem on
https://www.glorioushimalaya.com/trekking-and-hiking/everest-base-camp-trek/
when we hover the menu that goes back to the animated images. I had tried many ways but not get the problem to solve.
Expecting any idea to solve in this forum

link hover change parent element style

So I have an unordered list, with list items containing hyperlink tags

<ul>
 <li> 
  <a href="#">Tag</a>
 </li>
<ul>

On my LI tag, I have a border bottom set to the background color.

When my link is hovered I want to change the color of it?

How do I change the previous elements style?

ul li a:hover{
 text-decoration: none;
 color: #Blue;
}
 
ul li a:hover li{
 border-bottom: solid 5px #Green;
}

Syndicate content