css - 我如何知道我应该在响应式网站上的图像上设置什么宽度/高度?

标签 css performance image-size

问这个问题我觉得自己像个菜鸟,但这里是 :)

我正在阅读 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/

相关文章:

python - 读取文本文件的更有效方法是什么

html - 如何在不扭曲图像的情况下将图像放入固定大小的 div 中?

python - 我在 pytorch "RuntimeError: invalid argument 2: size ' [-1 x 400] 上收到此错误

html - CSS 在悬停 DIV 时更改超链接颜色

html - 使用图片库的 fancybox 工具不起作用

javascript - 将数组连接到自身是否比遍历数组以创建更多索引更快?

mysql - 如何加快这个缓慢的查询

css - 不同尺寸图像的命名约定

javascript - 模糊叠加效果

html - 如何使 CSS 二维网格响应?