图srcset和size属性 [英] Img srcset and sizes attributes

问题描述

我正在尝试使用 img 标签创建一个简单的网站，该网站将使用新的 srcset 属性。主要思想是根据屏幕分辨率更改图像（src）。

I'm trying to make a simple website with img tag, that will use the new srcset attribute. The main idea is to change the image (src) depending on the screen resolution.

工作示例

问题出在大小。如您所见，现在是100vw，但无法正常运行。对我来说，它将img的大小调整为屏幕的大约80％，而不是100％。
最好的是，当我在CSS中为 img 标签 width：100vw 编写代码时，它将调整为屏幕大小的100％。

The problem is with the sizes. As you can see, now it is 100vw, but it doesn't work correctly. For me, it resize img to about 80% of the screen, not 100%. The best thing is, that when I write in CSS for img tag width: 100vw, it will resize to 100% of the screen.

有人可以帮我吗？也许我做错了什么？

Can someone help me with that? Maybe I'm doing something wrong?

推荐答案

图片的宽度为1152像素，但是您告诉浏览器图片的宽度为1500像素（ 1500w ）。
然后，浏览器根据您告诉的内容确定图像的密度，并相应地校正图像的固有尺寸，但是由于它使用了错误的密度计算值，因此图像占据了视口宽度的76.8％，而不是100

The image is 1152 pixels wide, but you tell the browser it is 1500 pixels wide (1500w). The browser then determines the image's density based on what you told it, and corrects the image's intrinsic dimensions accordingly, but since it used the wrong value for the density calculations, the image occupies 76.8% of the viewport width rather than 100% of it.

要更改此设置，可以为浏览器提供更大的资源，或者告诉浏览器该资源为 1152w 。

To change that, you can provide the browser with a larger resource, or tell it that the resource is 1152w.

这篇关于图srcset和size属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！