So, I was trying to create a grid with different sizes, where when you clicked the image would zoom out and show the whole image. For this I need to apply overflow hidden so the images dont lose their ratio when showed in the grid.
I tryed this piece of code in jsfiddle and it worked fine...
<ul class="pppp" style='padding-left: 0; position: relative; background-color: white; font-size:0'> <li style='position: relative; display: block; width: 150px; height: 150px; overflow: hidden; background-color: green'> <img style='position: relative; display: block; width: 250%; object-position: 50% 50%' class="yImg" src='https://static.globalnoticias.pt/oj/image.aspx?brand=OJ&type=generate&guid=3d98d4a9-f15b-4f6b-bc9e-58f6e9bc97eb&w=768&h=512&t=20181226091336.jpg'/> </li> </ul>
But when copying it to wordpress it resizes the images to fit in the li element. I tried to find what was causing this and when commented out wp_head() it worked as supposed. Do you have a suggestion on how can I overcome this conflict by editing my css and not touching in the wp_head()?