Menu
What's the "correct" semantic way to specify image height and width? In CSS...
width:15px; or inline...
<img width="15" ?
CSS seems like the right place to put visual information. On the other hand, few would argue that image "src" should not be specified as an attribute and the height/width seem as tied to the binary image data as the "src" is.
(Yes, I realize from a technical, end-user perspective this really doesn't matter.)
871
. container { width: 50%; } . container img { width: 100%; height: 400px; //this should be the same as the width value.. }
specifying width and height in the image tag is a good practice.. this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.
The width attribute specifies the width of an image, in pixels. Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded.
Definition and UsageThe width attribute specifies the width of the element, in pixels. Note: For input elements, the width attribute is used only with <input type="image"> .
It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation.
If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
