Question

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

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

Answer 1

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

如果<img>的高度和宽度与图像的尺寸不匹配，则会缩放以适合。

Answer 2

好日子，@ Quentin的回答是单一的事实！

首先：@ Quentin的答案对于所有图像请求的99.999999％仍然有效。但是：

自从Chrome 46（以及很快在Firefox和Edge中）出现了一些名为Client Hints的内容。它的工作原理如下：

浏览器遇到src指向/image.jpg的图像元素。
确定应显示图像的宽度和分辨率（“DPR”）。

它将这些值添加为其他HTTP标头：

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

服务器现在可以自由地对这些提示作出反应，例如：通过网络发送预处理的图像，这是浏览器要求的正确尺寸。

这意味着，在您的回答中，您可能在您的服务器上拥有200x200图像，并使用CSS将其调整为100x80。您放置在网站前的CDN /代理（如CloudFlare），然后启用客户端提示并动态调整图像大小。您在服务器上有200x200，但客户端获取100x100，调整为100x80（请注意，客户端提示中没有Height标头。）

           100px              100px
browser -----------> proxy -------------> server ¯\_(ツ)_/¯
                                            |
                                            | 200px
                                            |
          100px                   200px     v
browser <------- proxy resizes <--------- proxy

Answer 3

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

仅供您参考，请查看以下示例＆amp;亲自尝试一下：

＆＃13;

img {
  width: 100px;
  height: 80px;
}

＆＃13;

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">

＆＃13;

希望这有帮助！

Answer 4

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

CSS如何调整图像大小？

4 个答案: