CSS - disabling width: auto

Question

I've got an image which is sized at 32 x 32 (i.e. 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.

possible duplicate of Style <img> to read dimensions from its HTML attributes, not CSS — BoltClock
– BoltClock, Commented Apr 27, 2015 at 18:35
@Toby Cannon: You can't use !important with HTML presentational attributes (see the comments under the linked question), and using it with width: auto won't change anything. — BoltClock
– BoltClock, Commented Apr 27, 2015 at 18:52

chrisbedoya · Accepted Answer · 2015-04-27 18:41:16Z

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; }

Since you have the width: 32px declaration there, you might as well just use that and forget about max-width. Initial is equivalent to auto and has the exact same effect, and inherit only works if the parent element's width is actually 32px, which is unlikely.

Nilesh Mahajan · Accepted Answer · 2015-04-27 18:40:18Z

0

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; }

answered Apr 27, 2015 at 18:40

Nilesh Mahajan

3,51623 silver badges35 bronze badges

2 Comments

BoltClock Over a year ago

Why would adding a class to the selector allow you to restrict that, or rather, why would not doing so prevent you from doing that?

Nilesh Mahajan Over a year ago

Using CSS selector we can easily overwrite inherited css properties, that what I have suggested here. If I am wrong please feel free to correct me.

Collectives™ on Stack Overflow

CSS - disabling width: auto

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related