Html 图片大小应该在 img 标签的高度/宽度属性中定义还是在 CSS 中定义？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2414506/
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
Should image size be defined in the img tag height/width attributes or in CSS?
提问by Benjamin Manns
Is it better coding practice to define an images size in the imgtag's widthand heightattributes?
在img标签width和height属性中定义图像大小是更好的编码实践吗？
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
Or in the CSS style with width/height?
或者在具有宽度/高度的 CSS 样式中？
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
Or both?
或两者？
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
采纳答案by G-Wiz
I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.
我将在这里反对，并声明将内容与布局分开的原则（这将证明建议使用 CSS 的答案是合理的）并不总是适用于图像的高度和宽度。
Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.
每个图像都有一个固有的、原始的高度和宽度，可以从图像数据中导出。在内容 vs 布局的框架中，我会说这个派生的高度和宽度信息是内容，而不是布局，因此应该作为元素属性呈现为 HTML。
This is much like the alttext, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.
这很像alt文字，也可以说是从图像中衍生出来的。这也支持任意用户代理（例如语音浏览器）应该具有该信息以便将其与用户相关联的想法。至少，纵横比可以证明是有用的（“图像的宽度为 15，高度为 200”）。这样的用户代理不一定会处理任何 CSS。
The spec says that the widthand heightattributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.
规范说width和height属性也可用于覆盖实际图像文件中传达的高度和宽度。我不是建议将它们用于此目的。要覆盖高度和宽度，我相信 CSS（内嵌、嵌入或外部）是最好的方法。
So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.
因此，根据您想要做什么，您可以指定一个和/或另一个。我认为理想情况下，原始高度和宽度将始终指定为 HTML 元素属性，而样式信息应可选地在 CSS 中传达。
回答by Brian Moeskau
The historical reason to define height/width in tags is so that browsers can size the actual <img>elements in the page even before the CSS and/or image resources are loaded. If you do not supply height and width explicitly the <img>element will be rendered at 0x0 until the browser can size it based on the file. When this happens it causes a visual reflow of the page once the image loads, and is compounded if you have multiple images on the page. Sizing the <img>via height/width creates a physical placeholder in the page flow at the correct size, enabling your content to load asynchronously without disrupting the user experience.
在标签中定义高度/宽度的历史原因是，<img>即使在加载 CSS 和/或图像资源之前，浏览器也可以调整页面中实际元素的大小。如果您没有明确提供高度和宽度，<img>元素将在 0x0 处呈现，直到浏览器可以根据文件调整其大小。发生这种情况时，一旦图像加载，它会导致页面的视觉回流，如果页面上有多个图像，情况就会复杂化。调整<img>通孔高度/宽度的大小会在页面流中以正确的大小创建物理占位符，使您的内容能够异步加载而不会中断用户体验。
Alternately, if you are doing mobile-responsive design, which is a best practice these days, it's quite common to specify a width (or max-width) onlyand define the height as auto. That way when you define media queries (e.g. CSS) for different screen widths, you can simply adjust the image width and let the browser deal with keeping the image height / aspect ratio correct. This is sort of a middle ground approach, as you may get some reflow, but it allows you to support a broad range of screen sizes, so the benefit usually outweighs the negative.
或者，如果您正在进行移动响应式设计，这是当今的最佳实践，那么仅指定宽度（或最大宽度）并将高度定义为auto. 这样，当您为不同的屏幕宽度定义媒体查询（例如 CSS）时，您可以简单地调整图像宽度并让浏览器处理保持图像高度/纵横比正确的问题。这是一种中间方法，因为您可能会进行一些回流，但它允许您支持广泛的屏幕尺寸，因此通常利大于弊。
Finally, there are times when you may not know the image size ahead of time (image srcmight be loaded dynamically, or can change during the lifetime of the page via script) in which case using CSS only makes sense.
最后，有时您可能无法提前知道图像大小（图像src可能会动态加载，或者可以在页面的生命周期内通过脚本更改），在这种情况下，使用 CSS 才有意义。
The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you're trying to achieve.
最重要的是，您需要了解权衡并决定哪种策略对您要实现的目标最有意义。
回答by Jim Greenleaf
While it's ok to use inline styles, your purposes may better be served by including an external CSS file on the page. This way you could define a class of image (i.e. 'Thumbnail', 'Photo', 'Large', etc) and assign it a constant size. This will help when you end up with images requiring the same placement across multiple pages.
虽然可以使用内联样式，但通过在页面上包含外部 CSS 文件可能更好地满足您的目的。通过这种方式，您可以定义一类图像（即“缩略图”、“照片”、“大”等）并为其分配恒定大小。当您最终需要在多个页面上放置相同位置的图像时，这将有所帮助。
Like this:
像这样：
In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />
Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />
In css/style.css:
img.thumbnail {
width: 75px;
height: 75px;
}
If you'd like to use inline styles though, it's probably best to set the width and height using the style attribute for the sake of readability.
但是，如果您想使用内联样式，为了可读性，最好使用 style 属性设置宽度和高度。
回答by ZX12R
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
specifying width and height in the image tag is a good practice..this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.
在图像标签中指定宽度和高度是一个很好的做法..这样当页面加载时，就会为图像分配空间，即使图像加载时间很长，布局也不会受到任何影响。
回答by SpliFF
Definitely not both. Other than that I'd have to say it's a personal preference. I'd use css if I had many images the same size to reduce code.
绝对不是两者兼而有之。除此之外，我不得不说这是个人喜好。如果我有许多相同大小的图像来减少代码，我会使用 css。
.my_images img {width: 20px; height:20px}
In the long term CSS may win out due to HTML attribute deprecation and more likely due to the growth of vector image formats like SVG where it can actually make sense to scale images using non-pixel based units like % or em.
从长远来看，CSS 可能会因 HTML 属性的弃用而胜出，更有可能是由于矢量图像格式（如 SVG）的增长，使用非基于像素的单位（如 % 或 em）缩放图像实际上是有意义的。
回答by Kieran
Option a.Simple straight fwd. What you see is what you get easy to make calculations.
选项a。简单的直接向前。所见即所得，便于计算。
Option b.Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86emhowever modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.
选项 B。除非您想要一个可以拉伸的站点，否则无法内联执行此操作太麻烦了。IE，如果您使用with:86em现代浏览器似乎可以充分满足我的目的。就个人而言，我唯一一次使用这样的东西是如果我要创建一个缩略图目录。
/*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>
Option c.Too messy to maintain.
选项 C. 维护起来太乱了。
回答by alanYap
I'm using contentEditableto allow rich text editing in my app. I don't know how it slips through, but when an image is inserted, and then resized (by dragging the anchors on its side), it generates something like this:
我正在使用contentEditable允许在我的应用程序中进行富文本编辑。我不知道它是如何滑过的，但是当插入图像，然后调整大小（通过拖动其侧面的锚点）时，它会生成如下内容：
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
(subsequent testing shown that inserted images did not contain this "rogue" style attr+param).
（随后的测试表明插入的图像不包含这种“流氓”风格的属性+参数）。
When rendered by the browser (IE7), the width and height in the style overrides the img width/height param (so the image is shown like how I wanted it.. resized to 55px x 55px. So everything went well so it seems.
当由浏览器 (IE7) 呈现时，样式中的宽度和高度会覆盖 img 宽度/高度参数（因此图像显示为我想要的方式.. 调整为 55px x 55px。所以看起来一切顺利。
When I output the page to a ms-word document via setting the mime type application/msword or pasting the browser rendering to msword document, all the images reverted back to its default size. I finally found out that msword is discarding the style and using the img width and height tag (which has the value of the original image size).
当我通过设置 mime 类型 application/msword 或将浏览器渲染粘贴到 msword 文档将页面输出到 ms-word 文档时，所有图像都恢复为其默认大小。我终于发现 msword 正在丢弃样式并使用 img 宽度和高度标签（它具有原始图像大小的值）。
Took me a while to found this out. Anyway... I've coded a javascript function to traverse all tags and "transferring" the img style.width and style.height values into the img.width and img.height, then clearing both the values in style, before I proceed saving this piece of html/richtext data into the database.
我花了一段时间才发现这一点。无论如何......我已经编写了一个javascript函数来遍历所有标签并将img style.width和style.height值“转移”到img.width和img.height中，然后在我继续之前清除样式中的两个值将这段 html/richtext 数据保存到数据库中。
cheers.
干杯。
opps.. my answer is.. no. leave both attributes directly under img, rather than style.
opps..我的答案是..不。将这两个属性直接保留在 img 下，而不是样式。
