Scaling images CSS

Question

I'm using the Nivo Slider and all the images are the same "height/Width" 766x400 but when viewing the slider in Firefox it up-scales everything to a masive 1,333px × 696px.

The interesting thing,when you do a split screen in the browser everything looks fine but full screen everything is blown up.

I'm wondering what CSS code I should be using to fix this issue

I would post my whole "code" but the images are related to my business and I'm not really sure.

Thanks

Answer 1

This may be caused by inline styles set by Nivo Slider, but it's hard to tell what the cause can be with example CSS/markup.

However the basics for responsive images is to make sure the width (or, often preferably, the max-width ) is set to 100% and that the height is set to auto . If there's inline CSS that will override your own CSS so you may either need to add !important to those rules or edit the plugin files for Nivo Slider and remove the printing of inline styles.

So basically, try this (but you may want to use a more specific selector and you shouldn't use !important unless it's absolutely necessary):

img {
    max-width: 100% !important;
    height: auto !important;
}