CSS - disabling width: auto

Question

I've got an image which is sized at 32 x 32 (ie the width and height attributes). However, the image remains sized at its default of 150 x 150.

Looking at the CSS I can see there's a width: auto in the parent CSS file. When I switch this off the image then resizes to 32 x 32.

I'd like to override this without altering the parent CSS file. How do I do this?

Note: I initially tried width: none which is not valid CSS.

Answer 1

Try setting the image's max-width to be no bigger than it's parent width. You can set the width/height to initial or inherit, see which one works for you.

Initial : Sets this property to its default value.

Inherit : Inherits this property from its parent element.

.parent img {
   max-width: 100%;
   width: 32px;
   height: initial;
}

Answer 2

you can restrict image height width by adding parent selector to the class for eg. have a look at following example

.parent img {
width : 32px;
height:32px;
}