One image with larger width (100%) than the width set for all images in css rule (70%)

Question

I have a CSS rule where i set all my images with a 70% width.

img, svg, iframe {max-width: 100%}
img {width: 70%; height: auto; object-fit: cover; border-radius: 5px; display: block; margin-left: auto; margin-right: auto; box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1`)}

But i do have one particular image that i want to to be 100% width:

<img alt="alt text example" border="0" data-original-height="467" data-original-width="767" loading="lazy" width="100%" height="auto" src="image.jpg"/>

I'm trying to force it's width to 100% but CSS overrides it (with 70%) so they all end up having the 70% which is fine except for this one image and i can't seem to figure a way to force it. Is this possible? I've tried using something like:important directly on the image code but without success width="100% important"

Any pointers on how to sort this will be highly appreciated. thx in advance.

Answer 1

If you can write an attribute width, then you can either do an inline style like style="width: 100%;"or better add a class to that image.

Also that width attribute won't work in that case.