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.

CodePudding user response：

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.