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='.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()?