CODEWITHSUNDEEP
htmlcss
Ormoz
Ormoz

Reputation: 3013

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

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.

Upvotes: 2

Views: 6299

Answers (4)

Barry
Barry

Reputation: 3723

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.

Upvotes: 2

Jayant Varshney
Jayant Varshney

Reputation: 1825

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>

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

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.

Upvotes: 0

somethinghere
somethinghere

Reputation: 17350

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)

Upvotes: 4

Related Questions