[英]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%. 假定
div
所有子图像( id="leaderboardimage"
)的宽度值为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. 但是现在我想向该div添加新图像,但是我不想应用上述样式。 How can I reset the width and hight values of this particular image( it is nested in an element with `class="creatortag").
如何重置此特定图像的宽度和高值(它嵌套在带有“ 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: 这是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. 非常感谢你。
To reset a max-value you use the none
keyword. 要重置最大值,请使用
none
关键字。 To reset a min value you use 0
. 要重置最小值,请使用
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) (注意:顺便说一句,将最大值重置为100%不会“默认”最大宽度,因为由于包装器的宽度,100%仍可能小于/大于实际图像宽度)
Use this selector for your CSS, instead: 请为CSS使用此选择器,而不是:
#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). 样式将仅应用于直接在
<div id="leaderboardimage">
下的<img>
元素(不适用于嵌套在div中其他元素内的元素)。
Personally, I would define a style for a class within CSS and assign that class to the images I want to style. 就个人而言,我将为CSS中的类定义样式,然后将该类分配给我要样式化的图像。
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%;
您可以取消
min-width:100%;
的原始样式min-width:100%;
and max-width:100%;
max-width:100%;
by adding min-width: 0;
通过添加
min-width: 0;
and max-width: none;
和
max-width: none;
to the styles of #leaderboardimage .creatortag img
. #leaderboardimage .creatortag img
的样式。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.