4

假设我有一个 1240x720 的图像，我使用 CSS 将其大小调整为 1240x250height和width. 我访问我的网站并且必须下载它，但是，我是下载原始的（1240x720）然后在我的浏览器上调整大小还是已经调整大小的版本（1240x250）？

从谷歌搜索中，我只能找到人们解释如何使用它的帖子，所以这可能是一个非常愚蠢的问题，因为它甚至没有在任何地方提及..

4

4 回答 4

5

浏览器将下载 URL 指向的任何内容。

如果图像的高度和宽度与<img>图像的尺寸不匹配，它将被缩放以适应。

于 2016-12-16T13:17:35.553 回答
2

哦，@Quentin 的回答是唯一真理的好日子！

首先是一件事：@Quentin 的回答对于 99.999999% 的所有图像请求仍然有效。但：

从 Chrome 46（很快在 Firefox 和 Edge 中）开始，就有了一种叫做Client Hints的东西。它是这样工作的：

  1. 浏览器遇到一个src指向的图像元素/image.jpg。
  2. 它确定应以何种宽度和分辨率 (" DPR") 显示图像。

  3. 它将这些值添加为额外的 HTTP 标头：

    GET /image.jpg HTTP/1.1
DPR: 1.0
Width: 100

  4. 服务器现在可以自由地对这些提示做出反应，例如通过网络发送一个经过预处理的图像，该图像的大小正好符合浏览器的要求。

这意味着，在您回答的上下文中，您可以在服务器上有一张200x200图片，并使用 CSS 将其大小调整为100x80. 像 CloudFlare 这样的 CDN/代理，您放在您的网站前面，然后启用客户端提示并即时调整您的图像大小。您200x200在服务器上，但客户端获取100x100，调整为100x80（请注意，客户端提示中没有Height标题）。

           100px              100px
browser -----------> proxy -------------> server ¯\_(ツ)_/¯
                                            |
                                            | 200px
                                            |
          100px                   200px     v
browser <------- proxy resizes <--------- proxy
于 2016-12-16T13:49:33.277 回答
1

假设实际图像大小为200x200，然后将其调整为100x80使用 CSS。如果您保存该图像，浏览器将下载实际图像，即200x200.

仅供参考，请查看以下示例并自己尝试：

img {
  width: 100px;
  height: 80px;
}
The actual height of below image is <strong><code>200x200</code></strong>.
<br><br>
Currently it is resized to <strong><code>100x80</code></strong> using CSS.
<br><br>
Try downloading it using right click, it will download to the actual size i.e. <strong><code>200x200</code></strong>
<br><br>
<img src="http://placehold.it/200x200">

希望这可以帮助！

于 2016-12-16T13:27:28.750 回答
-1

没有愚蠢的问题。对我来说这是很正常的。如果您在网站中使用一张图片并且每次都调整大小，则浏览器将加载原始图片，然后只会调整大小。您没有更改原始尺寸，您只是临时编辑该文件。

于 2016-12-16T13:27:58.487 回答