CSS 如何调整图片大小？

Question

假设我有一张 1240x720 的图像，我使用 height 和 width 通过 CSS 将其调整为 1240x250。我访问我的网站并必须下载它，但是我是下载然后在我的浏览器上调整大小的原始版本 (1240x720) 还是已经调整大小的版本 (1240x250)？

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

Answer 1

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

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

Answer 2

假设实际图像大小为 200x200，然后您使用 CSS 将其调整为 100x80。如果您保存该图像，浏览器将下载实际图像，即 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">

希望对您有所帮助！

Answer 3

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

Answer 4

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

首先要注意的是：@Quentin 的回答基本上对所有图像请求的 99.999999% 仍然有效。但是：

自 Chrome 46（并且很快在 Firefox 和 Edge 中）以来，有一个叫做 Client Hints 的东西。它是这样工作的：

浏览器遇到 src 指向 /image.jpg 的图像元素。
它确定图像应以何种宽度和分辨率（“DPR”）显示。
它将这些值添加为额外的 HTTP headers:
```
GET /image.jpg HTTP/1.1
DPR: 1.0
Width: 100
```
服务器现在可以自由地对这些提示做出反应，例如通过网络发送一个 pre-processed 图片，大小刚好符合浏览器的要求。

这意味着，在您的回答中，您可以在您的服务器上有一个 200x200 图像，并使用 CSS 将其调整为100x80。像 CloudFlare 这样的 CDN/proxy，放在网站前面，然后启用客户端提示并即时调整图像大小。服务器上有 200x200，但客户端得到 100x100，大小调整为 100x80（注意，客户端提示中没有 Height header）。

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

CSS 如何调整图片大小？

How does CSS resize images?

css

image

client-hints