How to override max-width for specific div?

Question

I am searching for the following solution. In my CSS I have the following:

img, a img { 
    max-width: 100%;
    vertical-align: middle; 
}

<

Answer 1

max-width: auto !important;

auto in max-width is not a valid property. You should replace it with

max-width: none !important;

Answer 2

Are you just looking to unset the max-width property? If so, try:

#pixel-perfect img {
    max-width: none;
}

Answer 3

I think it's because a img is more specific than #pixel-perfect img. Element selector is more specific than id selector (So in this example you have 2 elements vs 1element and 1 id).

In order to fix it, you'd have to add an element to your declaration, for example:

a#pixel-perfect img {
    max-width: auto !important;
}

Answer 4

Ensure that your #pixel-perfect img CSS declaration is BELOW the img, a img declaration, otherwise it will get overwritten.

#pixel-perfect img {
    max-width: none;
    width: auto;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

Answer 5

Use inherit, none, or initial to reset it.

jsFiddle example - it works.

#pixel-perfect img {
    max-width: inherit;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

According to MDN, none is the default value of max-width.

Also, since you are overwriting properties, make sure the desired property precedes the initial value in which you want overwritten. Cascade stylesheets are read from top to bottom, thus, if the max-width:100% appears below max-width:inherit in the stylesheet, it will overwrite it rendering max-width:inherit ineffective.

Aside from that, specificity may be an issue. However, it isn't very likely as your initial declaration isn't very specific.