How to remove Width and Height values of an Image with css?

Question

It has been supposed that all of child images of a div (with id="leaderboardimage" ) have a width value of 100%. So we have:

#leaderboardimage img{
width:100%;
height:auto;
min-width:100%;
max-width:100%;
}

But now I want to add a new image to this div but I do not want to apply the above styles. How can I reset the width and hight values of this particular image( it is nested in an element with `class="creatortag").

the below styling does not work:

#leaderboardimage .creatortag img{
width:auto;
height:auto;
min-width:0;
max-width:100%;
}

Here is sample of HTML:

<div id="leaderboardimage">
    <a class="creatortag">
         <img  /> an exception for the genarl css rule
    </a>
    <img />ordinary images
    <img />ordinary images
</div>

Thank you very much.

Answer 1

To reset a max-value you use the none keyword. To reset a min value you use 0 . So...

#leaderboardimage .creatortag img{
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
}

...should do it.

(Note: resetting a max value to 100%, by the way, does not 'default' the max-width, as 100% could still be smaller/bigger than the actual image width because of a wrappers width)

Answer 2

Use this selector for your CSS, instead:

#leaderboardimage > img {}

The styles will be applied only to the <img> elements directly under the <div id="leaderboardimage"> (not to elements that are nested within other elements inside the div).

Personally, I would define a style for a class within CSS and assign that class to the images I want to style.

Answer 3

This should work:

 #leaderboardimage img { width:100%; height:auto; min-width:100%; max-width:100%; } a.creatortag { display: block; overflow: hidden; } #leaderboardimage .creatortag img { width:auto; height:auto; min-width: 0; max-width: none; } 

 <div id="leaderboardimage"> <a class="creatortag"> <img src="http://placehold.it/350x150" /> an exception for the genarl css rule </a> <img src="http://placehold.it/350x150" />ordinary images <img src="http://placehold.it/350x150" />ordinary images</div> 

You can cancel out the original styles of min-width:100%; and max-width:100%; by adding min-width: 0; and max-width: none; to the styles of #leaderboardimage .creatortag img .

Answer 4

If possible then apply inline style. They are at the top priorities.

<div id="leaderboardimage">
    <a class="creatortag">
         <img  style="height:auto;width:auto;" /> an exception for the genarl css rule
    </a>
    <img />ordinary images
    <img />ordinary images
</div>