-1

I have done my gallery page with Media grid plugin in wordpress, but after the gallery published in the page, the thumbnail images are bit blurry (but lightbox images are okay), so i want it to be fixed by CSS code. i have attached the screen shot. This my gallery page

  • 1
    Images get blurry when you shrink them too small or expand them too big. Add your code for further help. – Chris Happy Jan 03 '17 at 06:30
  • Please post a clear screenshot showing whats wrong along with your CSS – Shobhit Srivastava Jan 03 '17 at 06:31
  • hi, i have give the screen shot in this link pls check http://prnt.sc/dqw8w7 and i did not give any css style to this gallery, it is defalut setting of Medie grid plugin –  Jan 03 '17 at 06:33

2 Answers2

0

It may be for the resize action ( little picture that stretches ) .

It is not related to CSS but you can set your thumbnail size by sth like this in functions.php :

add_image_size( 'category-thumb', 300, 9999 );
Majid Nayyeri
  • 447
  • 3
  • 15
0

The browser applies anti-aliasing to resized images by default to make them look better. If you prefer to undo this behavior, use the image-rendering css property to undo the anti-aliasing.

img {
  image-rendering: pixelated;
}

Here's an article with a good explanation:

https://css-tricks.com/almanac/properties/i/image-rendering/

A better way to resolve this (for performance) would be to use a lower resolution image file for your thumbnail, and only load the full sized image when the lightbox is opened.

dommmm
  • 899
  • 8
  • 16
  • hi thanks for reply, i have tried this code but the images then seems to be pixelled (but it clear) with double line ( image-rendering: pixelated; ) and not supported in IE –  Jan 03 '17 at 06:57
  • You should ideally use a separate smaller image for the thumbnail and load the full sized image in the lightbox if you want your images to display well. – dommmm Jan 03 '17 at 06:58
  • hi thanks it is working fine with "image-rendering: pixelated;" –  Jan 03 '17 at 07:22