img元素上的HTML width/height属性和CSS width/height属性有什么区别？

的HTML <img>元素可以具有宽度/高度属性，并且它也可具有CSS 宽度/高度性质。img元素上的HTML width/height属性和CSS width/height属性有什么区别？

<img src="xxx.img" width="16" height="16" 
style="width: 16px; height: 16px"></img>

HTML属性和CSS属性之间的区别是什么，它们应该具有相同的影响吗？

来源

2010-08-25 Morgan Cheng

关于被摄体A热议可以在这里找到：Width attribute for image tag versus CSS

概括起来：

从声明一个宽度值和高度值（这可能不是的增益原始物理尺寸图片）或来自css声明（如宽度：[valueX];高度： [valueY];）是它有助于加快页面的渲染速度。浏览器知道要分配一个特定区域的页面有多少空间：它会在的第一个绘制，第一个解析+渲染的页面上绘制图像占位符。当一个没有定义的任何宽度和高度时，那么浏览器必须下载图像，然后找出它的尺寸，空间分配然后重绘页面。

这在我看来似乎是最有利的影响。

来源

2010-08-25 06:53:17

+1提醒渲染 – 2010-08-25 12:59:38

警告，链接的博客帖子是从2005年开始的，现在的CSS标准可能会不同于现在。 – wberry 2016-07-27 20:48:53

-1

你可以试试这个

<img src="some_pic.jpg" width="100" />

它的高度将自动调整大小。

这

<img src="some_pic.jpg" style="width:100px" />

它的高度将不会自动调整大小。

只是尝试了，你们知道其中的差别

来源

2010-08-25 01:50:22

什么是自动调整大小？两个属性都是一样的。 – Marko 2010-08-25 01:51:25

我刚刚尝试。这是一样的。抱歉我的错误。 – 2010-08-25 01:53:17

你试过了吗？在CSS中设置属性1（宽度或高度）仍然会使图像调整大小以适应其比例。 – Marko 2010-08-25 01:57:04

我做了一个对比起来在：http://jsfiddle.net/jF8y6/有4个不同的状态。主要区别在于，通过外部样式表来调整图片的大小（桌面，移动，打印等）以及其带来的灵活性。如果硬编码的大小，那么它会停止灵活性。

来源

2010-08-25 01:55:00 Alex

http://www.w3schools.com/tags/tag_IMG.asp

我还没有使用的图像标签中，而为了这个目的。但是是有区别的，该属性可以是相对于图像尺寸，CSS样式属性是绝对的（要么％，PX，EM ...）

来源

2010-08-25 01:55:51 Tom

如何使用相对于图像尺寸的尺寸？我很困惑 – Marko 2010-08-25 02:08:43

他们有同样的效果。

<img width="100" height="100" />已经使用了很长时间，与说的HTML.html的widht/height属性相同。

不管你是在元素本身还是在CSS中指定它，虽然我现在更喜欢使用CSS，所以我可以保持HTML清晰和简洁。

下面是我加载相同的图像的4倍，两者比例和使用HTML属性和 CSS属性的非比例为例http://jsfiddle.net/N2RgB/1/

。

绝对没有区别。

来源

2010-08-25 01:55:56 Marko

我听说CSS正在转向标准化，所以属性可能会在某个时候被弃用。 – heltonbiker 2011-12-02 16:02:54

而根据我的实验，如果属性与风格相矛盾，风格会胜出。（Firefox，Chrome） – wberry 2016-07-27 21:05:08

嗯，这是完全不同的。浏览器总是首先下载HTML，然后是样式表，这意味着您可以保留一些带属性的宽度，然后在想要追求用户体验时应用正确的样式。 – KinoP 2016-10-18 07:51:41

区别在于语义和一般方法，而不是渲染如何工作。 :)我个人更喜欢在CSS类中集中宽度和高度等所有东西，并避免使用“width”和内联样式（如“style ='width：100px'”）这两个属性，仅仅因为它会导致很好的逻辑分离 - HTML标记告诉应该显示什么和CSS规则 - 它看起来如何。

来源

2010-08-25 02:09:23 dimarzionist

我可以看到一个区别... 检查下面的代码片段出被盗：http://jqueryui.com/resources/demos/button/icons.html

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Button - Icons</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<!-- redefine source of background-image --> 
<style> 
    .ui-icon { width: 64px; height: 64px; } 
</style> 

<script type="text/javascript" > 
$(function(){ 
    $("img").button({ 
     icons: { 
      primary: "ui-icon-locked" 
     }, 
     text: false 
    }); 
}); 
</script> 
</head> 
<body> 

<img width="32px" height="32px"> <!-- size of img tag --> 

</body> 
</html>

这是结果：

enter image description here

来源

2013-11-19 13:13:33 user2928048

img元素上的HTML width/height属性和CSS width/height属性有什么区别？

回答

相关问题