wp head - Wp_head () affecting my images layout

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()?