HTML5 - 我可以在IMG中使用宽度和高度吗？

Question

使用此代码是合法的：

<img src="...(here image)...." width="50px" height="50px" />

或者我需要使用：

<img src="...(here image)..." style="width: 50px; height: 50px;" />

Answer 1

建议首次使用，作为浏览器渲染的提示，第二次使用。

在第一种形式中，您不能添加'px'。

http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

Answer 2

根据HTML 5规范：

  

img ...上的width和height属性可以指定给出   元素可视内容的维度

来源：http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes

同样根据HTML 5规范，所有元素都可能具有样式属性。资料来源：http://www.w3.org/TR/html5/elements.html#the-style-attribute

因此，由于两者都是允许的，您可以自由选择适合您的想法。

Answer 3

应用于'img'的CSS将覆盖基本的html宽度＆amp;图像标签上的高度属性。

<style>
   img {
      width: 100%;
      height: auto;
   }
</style>

<img src="assets/img/logo.png" width="500" height="100">

上面的代码将导致图像在其容器的整个宽度上延伸，并且其高度将与其宽度相关。

如果您从一开始就加载适合视网膜的图形，这种方法很有用。

Answer 4

如上所述：

• CSS会在两者都存在的情况下覆盖<img> attrinutes，
• <img> attrinutes只是浏览器的提示。

另一个区别是使用单位：

• 在HTML5中，width和height属性应该是没有单位的整数，它们被解释为CSS像素。在实践中，brouwsers容忍%（在HTML4中有效），但如果你输入width="5cm"之类的内容，它将被解释为width="5"（即5px ）。
• 使用CSS时，允许使用任何长度单位和非整数，例如width: 5.5cm即可。你应该使用单位（例如width: 5不是有效的CSS宽度）。

所以，IMO，如果可能，你应该使用CSS。

Answer 5

首选样式=方式...实际上如果将样式移动到标题中的css文件或样式标记中会更好。