我记得很久以前对任何图像的宽度和高度进行硬编码是最好的做法(通常是在加载时分配适当的空间),但现在大多数人都在高速上,而且事情通常更动态,什么是最好的做法? 是否仍然首选任何内容图像都使用 html 设置内联大小?
8 回答
使用 HTML 属性或在样式表中设置大小无关紧要,但仍应指定图像的大小。
尽管现在图像的加载速度要快得多,但在显示页面和弹出图像之间仍然存在明显的延迟。当图像加载时页面布局发生变化时,它仍然很烦人。
是的,它仍然是首选。
很多人没有高速连接,移动变得越来越普遍。
它不必是内联的——你可以在外部 CSS 中做到这一点。一些老的浏览器,如果你不指定大小,只会把它当作0px;
使用 CSS 总是最好的
您可以像这样硬编码图像的高度和宽度
.myimg img {
width: 10px;
height: 10px;
}
您的图像文件本身应该是您希望它显示的大小,在大多数情况下,如果您特别担心加载缓慢!如果您有一个 500X800 像素的图像,而您只想显示为 100X200,请将其缩小!文件大小会小得多,因此加载速度会更快:)
如果您想确保在图像未加载或文档加载期间包含空白区域,我会说是。但是,如果您使用这些属性缩放/调整图像大小,则不会,因为它会在浏览器上造成不必要的负载并导致图像失真。
如果您正在设计跨浏览器兼容性,那么您至少应该在 CSS 中为图像本身指定高度和宽度。如果没有专门为图像指定尺寸,我发现 FireFox、IE、Opera 等之间存在不一致。由于每个浏览器(更不用说不同的版本)处理对 HTML 标准的遵守情况不同。我发现有些浏览器会尽最大努力推断 HTML 设计者的意图,而其他浏览器只会抱怨第一个错误。如果您打算从平板电脑等移动设备查看网站,我也会推荐 em 大小,而不是像素或 %。我会说,但是我刚刚开始使用 HTML5,所以我不知道 HTML5 在图像方面的区别。
我刚刚在 Wordpress Stack Exchange 和 Webmaster Stack 上回答了一个类似的问题。我在这里发布它是为了澄清和帮助更多的人。(管理员/版主:如果不允许,请告诉我正确的帮助方式)。
并不意味着您需要在 html 中指定宽度和高度。这意味着您必须保留适当的空间,并且在加载图像时,浏览器不必重排和重新绘制页面。
此外,如果您对尺寸进行硬编码,它会破坏响应行为。如果你的布局不是响应式的,没关系,但如果你想保持一些响应性,你可以只使用 CSS 来实现结果。
大多数时候,同时使用 width 和
max-width:100
will 完成工作,但是Smashing Magazine 的这篇文章有一个有趣的技术:您可以使用The Padding-Bottom Hack ,而不是使用 max-width:100% :“通过该技术,我们将高度定义为相对于宽度的度量。填充和边距具有这样的内在属性,我们可以使用它们为其中没有任何内容的元素创建纵横比。因为填充具有这种能力,我们可以将 padding-bottom 设置为相对于元素的宽度。如果我们也将 height 设置为 0,我们将得到我们想要的。[...]
下一步是在容器内放置一个图像并确保它填满容器。为此,我们需要将图像绝对定位在容器内,如下所示:"
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}