如何使用CSS刪除圖像的寬度和高度值？

Question

假定div所有子圖像（ id="leaderboardimage" ）的寬度值為100％。 因此，我們有：

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

但是現在我想向該div添加新圖像，但是我不想應用上述樣式。 如何重置此特定圖像的寬度和高值（它嵌套在帶有“ class =“ creatortag”的元素中）。

以下樣式無效：

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

這是HTML示例：

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

非常感謝你。

Answer 1

要重置最大值，請使用none關鍵字。 要重置最小值，請使用0 。 所以...

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

...應該這樣做。

（注意：順便說一句，將最大值重置為100％不會“默認”最大寬度，因為由於包裝器的寬度，100％仍可能小於/大於實際圖像寬度）

Answer 2

請為CSS使用此選擇器，而不是：

#leaderboardimage > img {}

樣式將僅應用於直接在<div id="leaderboardimage">下的<img>元素（不適用於嵌套在div中其他元素內的元素）。

就個人而言，我將為CSS中的類定義樣式，然后將該類分配給我要樣式化的圖像。

Answer 3

這應該工作：

 #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> 

您可以取消min-width:100%;的原始樣式min-width:100%; max-width:100%; 通過添加min-width: 0; 和max-width: none; #leaderboardimage .creatortag img的樣式。

Answer 4

如果可能，請應用內聯樣式。 他們是當務之急。

<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>