应该在img标签高度/宽度属性或CSS中定义图像大小？
在img标签的width和height属性中定义图片尺寸是否更好？
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
或在宽度/高度的CSS样式？
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
或两者？
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
我将在这里反对谷物，并声明从布局分离内容的原则（这将certificate使用CSS的答案）并不总是适用于图像的高度和宽度。
每个图像都有一个固有的原始高度和宽度，可以从图像数据中获得。 在内容vs布局的框架中，我会说这个派生的高度和宽度信息是内容，而不是布局，因此应该作为元素属性呈现为HTML。
这很像是alt文字，也可以说是源自图像。 这也支持这样的想法：任意的用户代理（例如语音浏览器）应该具有该信息以便将其与用户相关联。 至less，纵横比可能是有用的（“图像宽度为15，高度为200”）。 这样的用户代理不一定会处理任何CSS。
该规范说， width和height属性也可以用来覆盖实际图像文件中传达的高度和宽度。 我并不是build议他们这样做。 为了覆盖高度和宽度，我相信CSS（内联，embedded或外部）是最好的方法。
所以根据你想要做什么，你可以指定一个和/或另一个。 我认为，理想情况下，原始的高度和宽度总是被指定为HTML元素属性，而样式信息应该可选地在CSS中传递。
定义标签中的高度/宽度的历史原因是，即使在加载CSS和/或图像资源之前，浏览器也可以调整页面中实际的<img>元素的大小。 如果不显式提供高度和宽度，那么<img>元素将被渲染为0x0，直到浏览器根据该文件resize。 发生这种情况时，会在图像加载时导致页面的可视化回stream，如果页面上有多个图像，则会导致复杂化。 通过高度/宽度调整<img>在页面stream中以正确的大小创build物理占位符，使您的内容asynchronous加载而不会中断用户体验。
或者，如果您正在进行移动响应devise（这是目前最佳做法），则仅指定宽度（或最大宽度）并将高度定义为auto是相当常见的。 这样当你为不同的屏幕宽度定义媒体查询（例如CSS）时，你可以简单地调整图像宽度，让浏览器处理图像高度/宽高比。 这是一种中间立场的方法，因为你可能会得到一些回stream，但它允许你支持广泛的屏幕尺寸，所以好处通常大于负面。
最后，有些时候你可能不会提前知道图像大小（图像src可能是dynamic加载的，或者可以通过脚本在页面的生命周期中改变），在这种情况下，使用CSS只是有意义的。
底线是，你需要了解权衡，并决定哪个策略对你想要达到的目标最有意义。
尽pipe可以使用内联样式，但通过在页面中包含外部CSS文件可以更好地实现您的目的。 这样你可以定义一个图像类（即“缩略图”，“照片”，“大”等），并分配一个恒定的大小。 这将有助于在多个页面上显示需要相同位置的图像。
喜欢这个：
在你的标题中：
<link type =“text / css”rel =“stylesheet”href =“css / style.css”/>
你的HTML：
<img class =“thumbnail”src =“images / academia_vs_business.png”alt =“”/>
在css / style.css中：
img.thumbnail {
宽度：75px;
身高：75px;
}
如果您想使用内联样式，为了便于阅读，最好使用style属性来设置宽度和高度。
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
指定图像标签的宽度和高度是一个很好的做法..这种方式，当页面加载那里是分配给图像的空间，即使图像需要很长的时间加载布局不会有任何混蛋。
绝对不是两个。 除此之外，我不得不说这是个人喜好。 我会使用CSS，如果我有很多图像相同的大小，以减less代码。
.my_images img {width: 20px; height:20px}
从长远来看，CSS可能会因为HTML属性的弃用而获胜，更有可能是由于像SVG这样的vector图像格式的增长，在这种情况下，使用基于像素的单位（如％或em）来缩放图像实际上是有意义的。
选项a。 简单的直接转发。 你所看到的是你容易做出计算。
选项b。 太乱了，这样做内联，除非你想有一个可以舒展的网站。 IE浏览器，如果你使用with:86em然而现代浏览器似乎处理这个function足够我的目的..。 我个人唯一使用这样的东西是如果我要创build一个缩略图目录。
/*css*/ ul.myThumbs{} ul.myThumbs li {float:left; width:50px;} ul.myThumbs li img{width:50px; height:50px;border:0;} <!--html--> <ul><li> <img src="~/img/products/thumbs/productid.jpg" alt="" /> </li></ul>
选项c。 太杂乱来维护。
我正在使用contentEditable来允许在我的应用程序中进行富文本编辑。 我不知道它是如何滑过的，但是当插入一个图像，然后resize（通过拖动锚的方向），它会产生如下所示的内容：
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
（后来的testing显示插入的图像不包含这个“stream氓”风格attr + param）。
当由浏览器（IE7）呈现时，样式中的宽度和高度会覆盖img的宽度/高度参数（所以图像显示为我想要的样式，resize为55像素x 55像素，所以一切都很顺利。
当我通过设置MIMEtypesapplication / msword或将浏览器渲染粘贴到msword文档将页面输出到ms-word文档时，所有图像都恢复为其默认大小。 我终于发现，msword放弃了样式，并使用img宽度和高度标签（它具有原始图像大小的值）。
花了我一段时间才发现这一点。 无论如何…我已经编写了一个JavaScript函数来遍历所有标签，并将img style.width和style.height值“转”到img.width和img.height中，然后在继续之前清除样式中的两个值将这段html / richtext数据保存到数据库中。
干杯。
opps ..我的回答是..不。 直接在img下面留下这两个属性，而不是样式。
