0

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

  • 1
    wp_head() loads the theme and plugin script and styles. So it’s necessary. This just means that your CSS is conflicting with your theme’s. you’ll need to inspect the elements and see what changes you need to make. – Jacob Peattie Feb 14 at 9:50
  • @JacobPeattie The thing is that I'm not getting what should I do so the image fit the li element without resize but by overflowing. – Manuel Perdigão Feb 14 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.