问这个问题我觉得自己像个菜鸟,但这里是 :)
我正在阅读 Google's AMP以及如何定义图像的宽度和高度以减少页面呈现时间。
场景 1(使用 AMP)
假设我想使用手机屏幕的整个宽度,但我希望它能正确缩放。如何找到并设置高度/宽度?我怎么知道手机屏幕的宽度?
更新 使用例如WP,你可以让它将图像缩放到 3 种不同的尺寸。但是在图像加载之前,浏览器仍然不知道用户选择在文章中使用的尺寸(好吧,我看到了 WP 的解决方法)。
场景二(普通网页)
CMS 中的用户可以上传不同尺寸和不同格式的图像。在文章中使用图像时,我想要正确的纵横比。我怎么知道什么时候?
在加载图像之前我不知道图像的大小。那么如何设置图片的高度/宽度属性呢?
我们是否必须假设我事先知道图像的大小,并基于此,根据屏幕 View 大小使用正确的高度/宽度来保持正确的纵横比?
更新 据我所知,最好的解决方案是可以在加载图像文件之前加载图像元数据。执行数据库请求(希望)比加载实际图像更快。
最佳答案
在我看来,最好的方法是减少服务器端图像的权重。然后,你就会知道高度和宽度。如果需要,您也可以通过 AJAX 动态地执行此操作。
在 CSS 中设置正确的宽度和高度(来自 Bootstrap 的 img-responsive 类):
display: block;
max-width: 100%;
height: auto;
关于css - 我如何知道我应该在响应式网站上的图像上设置什么宽度/高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36006351/