Html HTML5 - 我可以在 IMG 中使用宽度和高度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6784868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 - Can I use Width and Height in IMG?
提问by Daniel
It is Legal to use this code:
使用此代码是合法的：
<img src="...(here image)...." width="50px" height="50px" />
Or I need to use:
或者我需要使用：
<img src="...(here image)..." style="width: 50px; height: 50px;" />
回答by TuteC
First use is recommended as hints for the browser's rendering, second one works.
建议第一次使用作为浏览器渲染的提示，第二次使用。
In the first form you must not add 'px'.
在第一种形式中，您不得添加“px”。
http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes
http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes
回答by erisco
According to the HTML 5 specification:
根据 HTML 5 规范：
The width and height attributes on img ... may be specified to give the dimensions of the visual content of the element
可以指定 img ... 的宽度和高度属性以给出元素的视觉内容的尺寸
Source: http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes
来源：http: //www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes
Also according to the HTML 5 specification, all elements may have style attributes. Source: http://www.w3.org/TR/html5/elements.html#the-style-attribute
同样根据 HTML 5 规范，所有元素都可能具有样式属性。来源：http: //www.w3.org/TR/html5/elements.html#the-style-attribute
Therefore, since both are allowed, you are free to choose whichever one suits your fancy.
因此，由于两者都是允许的，您可以自由选择适合您的喜好。
回答by Stacks on Stacks on Stacks
CSS applied to 'img' will overwrite basic html width & height attributes on image tags.
应用于 'img' 的 CSS 将覆盖图像标签上的基本 html 宽度和高度属性。
<style>
img {
width: 100%;
height: auto;
}
</style>
<img src="assets/img/logo.png" width="500" height="100">
The above code will result in an image that stretches across the entire width of its container, and its height will be relational to its width.
上面的代码将导致图像横跨其容器的整个宽度，并且其高度将与其宽度相关。
This approach is helpful if you're loading retina-appropriate graphics from the get-go.
如果您从一开始就加载适合视网膜的图形，这种方法会很有帮助。
回答by Kpym
As already mentioned :
正如已经提到的：
- CSS overwrite
<img>attrinutes in case where both are present, <img>attrinutes are only hints for the browser.
<img>如果两者都存在，CSS 会覆盖属性，<img>attrinutes 只是浏览器的提示。
Another difference is the use of units :
另一个区别是单位的使用：
- in HTML5the
widthandheightattributes should be integers without units, that are interpreted as CSS pixels. In practice the brouwsers tolerate%(that was valid in HTML4), but if you put something likewidth="5cm"it will be interpreted aswidth="5"(i.e.5px). - When you use CSS, any length units and non integer numbers are allowed, for example
width: 5.5cmis ok. And you should use units (for examplewidth: 5is not a valid CSS width).
- 在HTML5 中，
width和height属性应该是没有单位的整数，被解释为 CSS 像素。在实践中，浏览器可以容忍%（这在HTML4中有效），但是如果您放置类似的内容width="5cm"，它将被解释为width="5"(ie5px)。 - 当您使用 CSS 时，任何长度单位和非整数都是允许的，例如
width: 5.5cm可以。并且您应该使用单位（例如width: 5不是有效的 CSS 宽度）。
So, IMO, you should use CSS if possible.
因此，IMO，如果可能，您应该使用 CSS。
回答by ar3
The style= way is preferred...actually it would be even better if you moved that styling out into a css file or a style tag in your header.
style= 方式是首选……实际上，如果您将该样式移到 css 文件或标题中的样式标记中，效果会更好。
