CSS如何调整图像大小？

比方说，我有一张1240x720的图片，我用CSS使用height和width将其大小调整为1240x250。我访问我的网站并下载它，但是，我是否下载原始的（1240x720），然后在我的浏览器或已调整大小的版本（1240x250）上调整大小？CSS如何调整图像大小？

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

来源

2016-12-16 sysfiend

图像总是以其原有宽度和高度下载。然后浏览器在屏幕上修改它们的外观，如果它们应用了某些样式的话。 –

它仅以修改的大小显示它们。文件大小和尺寸仍然相同。 – 2016-12-16 13:17:16

浏览器将任何URL指向下载到。

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

来源

2016-12-16 13:17:35 Quentin

所以，如果我在我的网站上为三个不同的页面使用不同维度的同一个页面，我应该调整其中的每一个，并且有三个不同的文件，对吧？ – sysfiend

也许吧。这意味着必须下载相同图像的三个版本，而不是一次下载并缓存它。 – Quentin

Okey，现在明白了，谢谢！ – sysfiend

说出实际图像大小是否为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">

希望这有助于！

来源

2016-12-16 13:27:28

-1

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

来源

2016-12-16 13:27:58 MrVitaminasG

好日子，@昆汀的答案是单一的事实！

首先有一件事：@昆汀的答案仍然有效，基本上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。您放在网站前的CloudFlare等CDN /代理会启用客户端提示并随时调整您的图片大小。您在服务器上有200x200，但客户端获得100x100，调整为100x80（请注意，客户端提示中没有Height标头）。

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

来源

2016-12-16 13:49:33 Boldewyn

CSS如何调整图像大小？

回答

相关问题