I'm new to html so I'm a bit lost when I read that we can change the dimensions of the images through CSS or the width, height attribute.
For the width height attribute, some posts say that only pixels are accepted. But somehow, percentage also seems to work fine for my code.
However, when I tried using vw and vh, the image sized strangly.
so,
What are the accepted units for width and height attribute?
Is CSS recommended over width and height, for changing the dimensions of the images?
Many thanks.
The accepted units for the width and height attributes of an HTML img element are pixels. You give the number of pixels, but don't put the 'px'.
From MDN
width
The intrinsic width of the image in pixels. Must be an integer without a unit.
It is possible to get confused between these attributes and the use of CSS properties of the same names. While the attributes had more use probably when load times were longer (they allowed the correct space for the img to be saved in the page) they may be making a comeback, see https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping which ends with:
— eliminating another piece of jank from web layout! There is no need for a web developer to do anything special to their code to take advantage of this, besides returning to the habit of using width and height attributes in their HTML.
I am currently learning css and I have encountered some question about the SVG img. I have discovered that some SVG will take up the whole width of webpage if their width or height are not set, while some don’t and have a defined size. What does this property called? Is it related to the design of SVG image? example
Also, if I put a SVG which takes up the whole width of webpage into a flex box, the SVG will decrease in size. Why does this happen? Considing that a normal image and a SVG with defined size will not decrease the size in the same situation.example(fixed with class = "flex" instead of id).
I am also wondering how does the computer determine what size should the SVG decreased to? I have tried a few SVG(which take whole width) and almost each of them will decreased to a value near 150px x 150px in the flex box.
outer <svg> elements are replaced elements in CSS/HTML parlance and follow the rules for replaced element sizing
In particular if replaced elements have no defined size the browser falls back to a size of 300px x 150px, which is likely what you're seeing.
Normal i.e. raster images always have a defined size and are not replaced elements.
See also the SVG specification for how CSS affects SVG sizing
What is the default value of line-height in built-in HTML style, i.e. how many em does one line height takes?
Alternatively, how to set length (border width) to N lines of text?
Sets the line height to a ‘reasonable’ value relative to the element’s font face. Browser dependent results. CSS2 recommends a computed value between 1.0 and 1.2.
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family. Thanks
How browsers calculate size for elements with percents width or height? Is it calculated based on size of the parent node? What if parent node does not have explicit size attributes?
Yes it is calculated based on the parent node. Coming to your point if no explicit size has been given to the parent...Actually I have never done this so cannot guide you on that point.
But remember in case of font-size..if you do not specify any size then browsers go for some pre-defined settings. Every browser has a base font size..When you set a custom value of font-size then the browser actually adds or subtracts the values from that base size...
In short:
Yes its calculated on the basis of parent tag.
Its not safe to not give a custom size and rely on browsers pre-defined settings.
If you dont specify something mostly browsers fall back to their pre defined settings.
What is the more "correct" way to define <img>'s width and height?
Will it be directory through the tag with its "width" and "height" attributes, or would it be better to do it via CSS img { width:...; height... } ?
For a single unique content image used once it there's no reason not to use inline width/height attributes. They're still valid, even in Strict.
Circumstances a CSS rule would be better:
there are a number of instances of the image, or multiple images all the same size. A rule would allow you to cut down the amount of markup you have to write;
the image is part of a layout feature rather than content; a different stylesheet might want to resize it;
I might want to use more complex sizing rules than width/height attributes allow, such as %-sizing or max-width.
In this case it is definitely the right way, there really is no wrong way, to specify the width and height on the image tag itself. Especially during the rendering phase of your site, having the dimensions specified there, will be a small performance improvement as the browser does not need to try and calculate the size of the images.
From the spec:
"Author requirements: The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element".
All styling of elements should be done using CSS. The height and width attributes are considered to be no longer valid in most cases. This way you separate style and layout from function. It should also lead to cleaner html code and smaller files.
Both ways are "correct".
The usage depends on personal preferences or political (enterprise) decisions.
I myself think it is better to place it in the css.
You should always prefer CSS to HTML-attributes. HTML is meant to define the structure, while CSS tells the browser how to render it.
Both ways are fine. The width and height attributes are optional. If none are specified, the resource's dimensions will be used.
I would prefer to specify them in proper width and height attributes because they are closely related to the src used. It doesn't make sense to keep them in a style sheet.
From the spec (emphasis mine):
The width and height attributes on img, iframe, .... and input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers.