Reset css img width to old width property value-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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!