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.
>Solution :
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.