为了使响应图像在小屏幕上按比例缩小,我目前使用max-width: 100%;(或固定的最大宽度).与指定固定大小相反,这有一个可怕的缩小,因为当页面加载时,浏览器不为图像分配空间,只能在开始下载后才这样做.在加载所有图像之前,这会导致大量布局重排和糟糕的体验.
这似乎很容易修复 - 毕竟,我只需告诉浏览器实际大小是什么,以便它可以在下载前找出宽高比和最终大小.首先,我想知道这是什么width和heighthtml属性是什么,但我知道这不是他们的目的,因为他们可以用于重新缩放图像和更改最终大小.
我真正想要的是像" srcwidth"和" srcheight"那样告诉浏览器图像文件的实际大小,以便在知道宽高比以使用max-width样式之前不必加载.但是根据我的发现,没有像这些属性这样的东西.真的没有办法实现这个目标吗？
我尝试以这种方式使用实际width和heighthtml属性,然后用CSS覆盖它,但浏览器根本不关心它.