sizes

object sizes extends Attr

img - A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of:

  • a media condition. This must be omitted for the last item.
  • a source size value.

Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the <code>srcset</code> attribute, when those sources are described using width ('<code>w</code>') descriptors. The selected source size affects the intrinsic size of the image (the image’s display size if no CSS styling is applied). If the <code>srcset</code> attribute is absent, or contains no values with a width (<code>w</code>) descriptor, then the <code>sizes</code> attribute has no effect. source - Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in <code><a href="/en-US/docs/Web/HTML/Element/source#attr-srcset">srcset</a></code> to use.<br> The <code>sizes</code> attribute has an effect only when the <a title="The HTML <source> element specifies multiple media resources for either the <picture>, the <audio> or the <video> element. It is an empty element. It is commonly used to serve the same media content in multiple formats supported by different browsers." href="/en-US/docs/Web/HTML/Element/source"><code><source></code></a> element is the direct child of a <a title="The HTML <picture> element is a container used to specify multiple <source> elements for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout of the page (the constraints of the box the image will appear in) and the device it will be displayed on (e.g. a normal or hiDPI device.)" href="/en-US/docs/Web/HTML/Element/picture"><code><picture></code></a> element. link - This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the <code><a href="/en-US/docs/Web/HTML/Element/link#attr-rel">rel</a></code> contains the <code>icon</code> <a href="/en-US/docs/Web/HTML/Link_types">link types value</a>. It may have the following values:

  • <code>any</code>, meaning that the icon can be scaled to any size as it is in a vectorial format, like <code>image/svg+xml</code>.
  • a white-space separated list of sizes, each in the format <code><em><width in pixels></em>x<em><height in pixels></em></code> or <code><em><width in pixels></em>X<em><height in pixels></em></code>. Each of these sizes must be contained in the resource.

<strong>Usage note: </strong>

  • Most icon format are only able to store one single icon; therefore most of the time the <code><a href="/en-US/docs/Web/HTML/Global_attributes#attr-sizes">sizes</a></code> contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO being more ubiquitous, you should use it.
  • Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard <a href="/en-US/docs/Web/HTML/Link_types">link types values</a> to define icon to be used as Web Clip or start-up placeholder: <code>apple-touch-icon</code> and <code>apple-touch-startup-icon</code>.
trait Attr
class Object
trait Matchable
class Any

Type members

Classlikes

object tag extends TagElement

Types

Inherited types

type supports[T <: Tag] = AttrPair[attrType] => AttrPair[tagType]
Inherited from
Attr

Value members

Concrete methods

@inline
def :=(v: String): AttrPair[_sizes_attr]
@inline
def :=(v: Option[String]): OptionalAttrPair[_sizes_attr]