html替换img标签问题

Images can be displayed using the img tag.

可以使用img标签显示图像。

This tag accepts a src attribute, which we use to set the image source:

此标记接受src属性，我们使用它来设置图像源：

We can use a wide set of images. The most common ones are PNG, JPEG, GIF, SVG and more recently WebP.

我们可以使用多种图像。 最常见的是PNG，JPEG，GIF，SVG和最近的WebP。

The HTML standard requires an alt attribute to be present, to describe the image. This is used by screen readers and also by search engine bots:

HTML标准要求存在alt属性来描述图像。 屏幕阅读器和搜索引擎机器人都使用此功能：

You can set the width and height attributes to set the space that the element will take, so that the browser can account for it and it does not change the layout when it’s fully loaded. It takes a numeric value, expressed in pixels.

您可以设置width和height属性来设置元素将要占用的空间，以便浏览器可以考虑它，并且在完全加载时它不会更改布局。 它需要一个数值，以像素为单位。

使用srcset响应图像 (Responsive images using srcset)

The srcset attribute allows you to set responsive images that the browser can use depending on the pixel density or window width, according to your preferences. In this way it can only download the resources it needs to render the page, without downloading a bigger image if it’s on a mobile device, for example.

srcset属性使您可以根据自己的喜好，设置浏览器可以根据像素密度或窗口宽度使用的响应图像。 这样，它只能下载呈现页面所需的资源，而如果是在移动设备上，则不能下载更大的图像。

Here’s an example, where we give 4 additional images for 4 different screen sizes:

在以下示例中，我们针对4种不同的屏幕尺寸提供了4张其他图片：

In the srcset we use the w measure to indicate the window width.

在srcset我们使用w度量来指示窗口宽度。

Since we do so, we also need to use the sizes attribute:

既然这样做，我们还需要使用sizes属性：

In this example the (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px string in the sizes attribute describes the size of the image in relation to the viewport, with multiple conditions separated by a comma.

在此示例中， sizes属性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述与视口有关的图像大小，多个条件之间用逗号分隔。

The media condition max-width: 500px sets the size of the image in correlation to the viewport width. In short, if the window size is < 500px, it renders the image at 100% of the window size.

媒体条件max-width: 500px设置与视口宽度相关的图像大小。 简而言之，如果窗口大小小于500像素，它将以窗口大小的100％渲染图像。

If the window size is bigger but < 900px, it renders the image at 50% of the window size.

如果窗口大小更大但< 900px ，它将以窗口大小的50％渲染图像。

And if even bigger, it renders the image at 800px.

如果更大，它将以800像素渲染图像。

The vw unit of measure can be new to you, and in short we can say that 1 vw is 1% of the window width, so 100vw is 100% of the window width.

vw度量单位可能对您来说是新的，简而言之，我们可以说1 vw是窗口宽度的1％，因此100vw是窗口宽度的100％。

A useful website to generate the srcset and progressively smaller images is .

一个有用的网站，可以生成srcset和逐渐缩小的图像， 为 。

翻译自:

html替换img标签问题