应该在img标签高度/宽度属性或CSS中定义图像大小?

img标签的widthheight属性中定义图片尺寸是否更好?

 <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。

该规范说, widthheight属性也可以用来覆盖实际图像文件中传达的高度和宽度。 我并不是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下面留下这两个属性,而不是样式。