Reset css img width to old width property value

Question

I'm working with a framework where a global css rule

img {
        width: 100%;
    }

is set - that I cannot change. Now I'm working with a WYSIWYG editor that resizes images by setting their (old) width property. Is there any chance to reset it to the element's size via css?

e.g.

.container img {
    width: unset; // (or initial)
}

But that obviously doesn't work. Element inspector tells me

initial
removed: 100%
removed: 100px (value of the width property)

Here is a Stackblitz showing the issue: https://stackblitz.com/edit/web-platform-rjtfrt?file=styles.css

I want the images' width to be 200 by just changing .container img.

You can override the property value using !important

Phaelax
– Phaelax

2021-10-05 19:24:21 +00:00
Commented Oct 5, 2021 at 19:24 — Phaelax
– Phaelax, Commented Oct 5, 2021 at 19:24
What do you mean by 'old' width property?

A Haworth
– A Haworth

2021-10-05 19:31:39 +00:00
Commented Oct 5, 2021 at 19:31 — A Haworth
– A Haworth, Commented Oct 5, 2021 at 19:31
Added an example - sorry, should have done this sooner.

tris
– tris

2021-10-05 20:53:49 +00:00
Commented Oct 5, 2021 at 20:53 — tris
– tris, Commented Oct 5, 2021 at 20:53

pavel · Accepted Answer · 2021-10-05 19:50:39Z

0

Initial or fit-content are values your are looking for. Depends if you want to set real image size or width attribute value.

Check two examples below.

img {width: 100%;}
.container #img1 {width: initial;} /* taking real image width (300px) */
.container #img2 {width: fit-content;} /* taking width attribute value (200px) */

<div class=container>
  <img id="img1" width=200 height=200 src="https://picsum.photos/300/200">
  <img id="img2" width=200 height=200 src="https://picsum.photos/300/200">
</div>

A brief about browser support at https://caniuse.com/?search=fit-content

answered Oct 5, 2021 at 19:50

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tris Over a year ago

Sorry, the question was a bit unclear - I added an example.

pavel Over a year ago

@tris: I think I gave you a solution. Check code snippet here. First image has 300px width (real image size), the second one 200px (attribute width). Why do you think it isn't what you asked?

tris Over a year ago

It somehow isn't working for me - check my stackblitz.

pavel Over a year ago

@tris: Hmm, it works correctly in Mac/Safari, in Mac/Chrome doesn't... My fault, sorry.

tris Over a year ago

How I love that we still haven't left these browser dependent struggles 😉 But that you for checking! So I guess there is no solution? Super hacky: it works for width-style (but not property) when setting a broken value ... stackblitz.com/edit/web-platform-rjtfrt?file=styles.css But I guess so there is no solution? Really?

|

tris · Accepted Answer · 2021-10-06 08:01:38Z

0

Just found this questions: CSS, how to size an img back to its width attribute and it really seams like there is no solution. Please correct me if I'm wrong!

answered Oct 6, 2021 at 8:01

tris

1,1094 gold badges14 silver badges32 bronze badges

Collectives™ on Stack Overflow

Reset css img width to old width property value

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related