Html 调整srcset图像大小的正确方法

调整srcset图像大小的正确方法是什么？例如，假设我有一张2000 x 1337的图像。我将其调整为255 x 170。对于2x srcset，应为：

510 x 340（基于当前图像）

510 x 339（基于原始图像）

编辑

---

为了澄清，我想知道srcset是如何工作的。例如，如果我将510 x 339图像（基于原始图像的技术上更正确的尺寸）用于2x，浏览器是否会“创建”一个510 x 340容器（当前尺寸x 2），然后调整510 x 339图像的大小以适应其内部？

如果图像容器固定为255 x 170，请对其进行计算

（2x=*2）=（CurrentImageSize*2=x）

比率正在计算从最低到最高（上升）

e、 g

技术上：如果（1x=57），则（2x=114）

演示示例：

好的，因为我是1x显示器，所以1.5625是最接近我需要的。它有点高，但与其他太高的选项相比，它是最好的选择。 现在，另一个浏览器访问该站点。它也是一个320像素的显示器，但它是一个视网膜（2x）显示器。该浏览器执行相同的计算，然后才执行以下操作：

好的，因为我是一个2倍的显示器，我要扔掉1.5625的图像，因为它对我来说太低了，可能看起来不好。我将使用3.125图像。 看看这有多有用？你让浏览器做的工作是找出什么对它最好，而不是你试图找出它

对于您特别要求的，一个或两个像素的变化 没关系。你应该看的基本上是更高的 像素密度将加载大图像

对于2X，只需使用两倍的宽度，100%的精度是不够的 必修的 要获得所需的宽度，可以使用w描述符：

因此，对于1.5倍的显示器，images/space-needle-2x.jpg将由浏览器下载，因为它的设备像素比为1.6倍（最适合1.5倍的显示器）

编辑1:- 实际上，你要寻找的不是srcset，而是srcset。你不希望你的图像在调整大小时变得模糊，或者你所说的响应图像应该保持其原始质量，并且不要模糊。 针对同一问题，我在这里添加了来自SO的问答 这说明了如何使用

图像渲染

css属性

编辑2:-

img{

      image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

关于缩放时的图像渲染问题，可以使用图像渲染css proprety解决，并在缩放图像上试用。下面给出了文档

关于浏览器是否会通过调整图像以适应容器大小来更改图像大小的问题，答案是ie从539更改为540:-

img{

      image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

不，它不会根据所使用的约束设置，只拍摄最适合该显示的图片，像素密度或屏幕大小可能是给定的约束。其余取决于css

没有srcset的简单示例

---

正确的方法是选项1:510 x 340（基于当前图像）

如果使用510 x 339（基于原始图像），浏览器将仅拉伸它，直到它适合2x框

您使用的图像必须具有可被2（2x）或3（3x）整除的尺寸，否则即使未设置宽度或高度，浏览器也会调整其大小。

---

测试1-Nexus 5镀铬200x200 img容器内的600x300（3x）图像

此图像最初包含一个圆，您可以看到浏览器拉伸图像以填充200 x 200容器

测试2-Nexus 5镀铬200x200 img容器内的600x600（3倍）与600x599（3倍）图像

---

检查以防浏览器有一些smarts将1px不同的图像单独保留（因为这些图像可能是“正确”的尺寸）。似乎不是。

据我所知，应该基于屏幕大小，例如基于屏幕大小？是的，当然唯一取决于屏幕大小，而不是实际图像是否需要解释否决票？我没有否决你对不起，我不确定你想说什么？你怎么知道它应该基于当前图像大小而不是原始图像大小？你在网站上使用的是大小调整后的图像或原始图像？我相信这是来自外部来源。如果不是你的，请参考网址。干杯是的，我正在编辑和添加它，需要更多引用w3c的例子org@JeradRutnam很高兴指出这一点，先生，请尽你的公民责任：如果发现它是正确的，请投赞成票。我很感激你为你的答案所付出的努力，但不幸的是，我认为它不能回答我的问题。“对于您特别提出的一个或两个像素的变化无关紧要的问题”我不同意，1px可能会产生很大的不同，因为浏览器可能需要调整图像大小，这可能会产生“模糊”图像。示例：这是一个完全不同的问题。在这个过程中，srcset的用途被破坏了。您需要做的是使用photoshop根据每个屏幕大小的计算尺寸调整图像大小，目标尺寸为2x，3x，使用photoshop sitepoint.com/resize-an-image-in-photoshop使用此方法使图像保持清晰且不模糊。一旦你选择屏幕大小的倍数，它就会调整屏幕大小。还有一件事是，每次都要从原始文件中调整目标大小

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

srcset="images/space-needle.jpg 0.8x, images/space-needle-2x.jpg 1.6x,
images/space-needle-hd.jpg 2.4x"

img{

      image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}