Woocommerce Responsive Product Images with CSS

I'm trying to get my product images to crisp and without any pixelation when I adjust the browser window. Right now it looks like this when I adjust the browser window:

http://s8.postimg.org/jqbm5net1/Screen_Shot_2014_12_03_at_2_56_48_PM.png

I've researched for a CSS fix, however I cannot find a solution that works. All of the woocommerce support docs for the "blurry product image issue" solve it as adjusting the product images' fixed with in Woocommerce > Settings > Products.  However this does not allow the images to remain crisp at different browser widths.

All the product images uploaded are 1000px by 1000px. What CSS rules need to be applied? Or do I need to edit woocommerce core files? Or both? Any help appreciated.

website: http://cloud9slo.com
Screen-Shot-2014-12-03-at-2.56.48-PM.png
LVL 4
doug sAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Looking at your page, I can see you have a full image http://cloud9slo.com/wp-content/uploads/2014/10/home-slider-cloud-9-slo.jpg  at 1920 × 577.

The rendered code around the image has the following
element.style {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(http://cloud9slo.com/wp-content/uploads/2014/10/home-slider-cloud-9-slo.jpg);
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-position: 50% 0%;
background-repeat: no-repeat;
}

Open in new window

Since you are using "cover", the image could be stretched at something other than the original ratio of width and hight.  Your images should be at 100% for the best image quality and for sure the same ratio.

The ratio of the image on the site is 2.744 where the original image is 3.23.  To get this ratio, I am dividing the width and height.  Because the the rendered ratio is different than the original, it is not going to be as crisp.  

If you are using the woo plug in, it might be easier to just keep it as is.  The other option is to crop your image at the same ratio the plug in uses.  The last option is to recode that area yourself.  

Cropping the images may be easier.  Take note if you can use different images for different breaks in media queries as your image ratio may change.
0
doug sAuthor Commented:
Thanks for the reply Scott. The slider image http://cloud9slo.com/wp-content/uploads/2014/10/home-slider-cloud-9-slo.jpg is adjusting fine to various browser widths and maintains quality.

 It's the Single product images i'm having trouble keeping crisp while adjusting the browser window. > http://s8.postimg.org/jqbm5net1/Screen_Shot_2014_12_03_at_2_56_48_PM.png
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you use your browser's console to view the rendered code.  At least in chrome you can hover over the image link and it shows you the rendered image.  The image is off by a pixle.  More importantly it looks like the single shots are using the small image (255 X 255).  Possibly even lost some pixels to be downgraded to lower resolution. That would explain the issue.  
screenSee if there is a setting in your theme to allow you to choose which size image to use.  When you upload, WP is saving multiple images in different sizes.   It is always best to have the image at 100%, next is viewing a larger image in smaller by way of the browser shrinking the viewable size.  But when you have a small image that the browser resizes larger, that will have the worst effect.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.