spz-img

The image URL. Mandatory for the <img> element.

Defines an alternative text description of the image.

If this attribute hasn’t a value, it calculates the appropriate image size through a algorithm. This algorithm will calculate a size value by the width and height of the element and the device pixel ratio, and then find a larger value from the following size values as the image size.

const IMAGE_SIZE_TABLE = [
  48, 180, 360, 540, 720, 900, 1024, 1280, 1366, 1440, 1536,
  1600, 1920, 2056, 2560, 2732, 2880, 3072, 3200, 3840
];

If the calculated size of the image is 480, 540 will be selected as the size of the image according to the size table. It will add the size suffix to the URL of the image, For example:

<!-- Before -->
<spz-img
  layout="responsive"
  width="200"
  height="200"
  src="https://img.staticdj.com/free/dd0fc4107fb10b19cd25dc51d7500ee8.jpg"
  alt="An bicycle"
  auto-fit
></spz-img>

<!-- After -->
<spz-img
  src="https://img.staticdj.com/free/dd0fc4107fb10b19cd25dc51d7500ee8_540x.jpg"
  ...
></spz-img>

auto-fit can better reduce the image size and calculate the most suitable image size to improve performance.

If this attribute has a value, the size of the image will be directly set to the given value.

<!-- Before -->
<spz-img
  layout="responsive"
  width="200"
  height="200"
  src="https://img.staticdj.com/free/dd0fc4107fb10b19cd25dc51d7500ee8.jpg"
  alt="An bicycle"
  auto-fit="320"
></spz-img>

<!-- After -->
<spz-img
  src="https://img.staticdj.com/free/dd0fc4107fb10b19cd25dc51d7500ee8_320x.jpg"
  ...
></spz-img>

To adjust the sizing of the image within the box, just like object-fit CSS property.

To position the image within the element’s box, just like object-position CSS property.

Indicates that the image has been loaded.