Apply font size to img alt property without affecting the image size

Hi I am trying to set the font size to the img alt property but it affects the image size.

I'm doing something like this in the css

---
HTML Code:
<img alt="Some Text" src="http://www.someimage.com/img/010.jpg">


CSS:
img[alt]{font-size:0.75em;}
---

Can anyone help me in applying of font-size for the alt property of image without affecting image size.

Please note I don't want to use Javascript. Just pure CSS开发者_运维技巧

The alt property is a property of the image tag, it's not an element by itself. You can't style the alt property, in much the same way as you can't style the src property.

When you use img[alt] as a selector in CSS, you are not targeting the alt attribute of image tags, you are targeting any image tag that has an alt attribute. As you are setting the font size of the image tag, it will naturally also affect the image tag.

If you mean that you want to style the tooltip that some browsers show when you hover the image, you can't do that. The tooltip is an implementation detail in the browser, and there is nothing in HTML that says that the alt attribute should be used that way, so there is no means in HTML for controlling that feature.

The intention of the alt attribute is to have something to show to the user if it's not possible to show the image.

In my personal testing, setting a font-size attribute on an image had no effect on the image.

I was able to resize the alt text, though. At first I tried putting HTML inside the alt attribute, but it was displayed as plain text, not HTML. Then I wrapped the image containing the alt text in a span tag with a style, and that worked, because the image inherited the font-size from the span.

Here is an example:

<span style="font-size: 0.75em">
    <img alt="Some Text" src="http://www.someimage.com/img/010.jpg">
</span>

Refer to this answer regarding the alt attribute.

I could be wrong, but I think it's only controllable from the user's display property settings and can't be modified through css.