HTMLImageElement：sizes 属性

HTMLImageElement 属性sizes 允许您为媒体条件列表中的每个条件指定图像的布局宽度。这提供了在不同图像之间自动选择的能力——即使是不同方向或纵横比的图像——因为文档状态会更改以匹配不同的媒体条件。

每个条件都使用与媒体查询相同的条件格式指定。

值

一个字符串，包含以逗号分隔的源大小描述符列表，后跟一个可选的回退大小。每个源大小描述符都包含一个媒体条件，然后至少一个空格字符，然后是当媒体条件计算结果为true时用于图像的源大小值。

媒体条件

每个源大小描述符都包含一个由媒体查询标准定义的媒体条件。因为源大小描述符用于指定在页面布局期间用于图像的宽度，所以媒体条件通常（但并非总是）完全基于宽度信息。有关如何构造媒体条件的详细信息，请参阅使用媒体查询，语法。

源大小值

源大小值是 CSS <length>。可以使用字体相关的单位（例如em或ex）、绝对单位（例如px或cm）或vw单位来指定，这允许您将宽度指定为视口宽度的百分比（1vw为视口宽度的 1%）。

注意：源大小值不能指定为容器大小的百分比；也就是说，不允许使用诸如50%或100%之类的长度，因为对于指定值是哪个容器的百分比存在不确定性。

示例

选择适合窗口宽度的图像

在此示例中，创建了一个类似博客的布局，显示了一些文本和一个图像，该图像根据窗口宽度指定了三个尺寸点。三个版本的图像也可用，并指定了它们的宽度。浏览器获取所有这些信息并选择最符合指定值的图像和宽度。

图像的确切使用方法可能取决于浏览器和用户显示器的像素密度。

示例底部的按钮实际上允许您稍微修改sizes属性，在图像的三个宽度中切换最大的宽度，在 40em 和 50em 之间切换。

HTML

html
<article>
  <h1>An amazing headline</h1>
  <div class="test"></div>
  <p>
    This is even more amazing content text. It's really spectacular. And
    fascinating. Oh, it's also clever and witty. Award-winning stuff, I'm sure.
  </p>
  <img
    src="new-york-skyline-wide.jpg"
    srcset="
      new-york-skyline-wide.jpg 3724w,
      new-york-skyline-4by3.jpg 1961w,
      new-york-skyline-tall.jpg 1060w
    "
    sizes="((min-width: 50em) and (max-width: 60em)) 50em,
              ((min-width: 30em) and (max-width: 50em)) 30em,
              (max-width: 30em) 20em"
    alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />
  <p>
    Then there's even more amazing stuff to say down here. Can you believe it? I
    sure can't.
  </p>

  <button id="break40">Last Width: 40em</button>
  <button id="break50">Last Width: 50em</button>
</article>

CSS

css
article {
  margin: 1em;
  max-width: 60em;
  min-width: 20em;
  border: 4em solid #880e4f;
  border-radius: 7em;
  padding: 1.5em;
  font:
    16px "Open Sans",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;
}

article img {
  display: block;
  max-width: 100%;
  border: 1px solid #888;
  box-shadow: 0 0.5em 0.3em #888;
  margin-bottom: 1.25em;
}

JavaScript

JavaScript 代码处理两个按钮，这些按钮允许您在 40em 和 50em 之间切换第三个宽度选项；这是通过处理click事件来完成的，使用 JavaScript 字符串replace()方法替换sizes字符串的相关部分。

js
const image = document.querySelector("article img");
const break40 = document.getElementById("break40");
const break50 = document.getElementById("break50");

break40.addEventListener(
  "click",
  () => (image.sizes = image.sizes.replace(/50em,/, "40em,")),
);

break50.addEventListener(
  "click",
  () => (image.sizes = image.sizes.replace(/40em,/, "50em,")),
);

结果

最好在它自己的窗口中查看该页面，以便您可以完全调整大小。

规范

规范
HTML 标准
# dom-img-sizes

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅