HTML Source Sizes Attribute - Dofactory

Trang chủ » Html Source Image Size » HTML Source Sizes Attribute - Dofactory

Có thể bạn quan tâm

HTML <source> sizes Attribute HTML <small> HTML <span>

The sizes attribute on an <source> element specifies different image widths.

These widths are tied to browser conditions which helps create responsive images.

Example

#

A sizes attribute on a <source> element. Resizing the browser will adjust the image file that will display.

Vincent Van Gogh <picture> <source srcset="/img/html/vangogh-sm.jpg 120w, /img/html/vangogh.jpg 193w, /img/html/vangogh-lg.jpg 278w" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px"> <img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh"> </picture> Try it live

The three images of different size.

Code Explanation

A small image is used with a screen between 0 - 710px. The layout width is 120px.

A medium image is used with a screen between 711px - 991px. The layout width is 193px.

A large image is used with a screen 992px and larger. The layout width is 278px.

See below for a detailed description.

Using sizes

#

The srcset and sizes attributes work together to create responsive images.

The srcset attribute points to image URLs.

And sizes specifies image sizes and browser conditions (media queries).

Each size in sizes has the following format: (media-condition) width

  • media-condition = Media query (e.g max-width: 540px), followed by a space.
  • width = The width of the available space in pixels (px), em, or viewport (vw).
  • Multiple sizes are comma-separated. Here is an example:
<source srcset="/img/new-york-sm.jpg 120w, /img/new-york-md.jpg 200w, /img/new-york-lg.jpg 300w" sizes="((min-width: 10em) and (max-width: 20em)) 10em, ((min-width: 30em) and (max-width: 40em)) 30em, (min-width: 40em) 40em">

Syntax

#

<source sizes="(media-condition) width">

Note: Multiple values are comma-separated.

Values

#

Value Description
(media-condition) width A media-query followed by the image layout width. The layout width can be defined with px, em, or vw.

Browser support

#

Here is when sizes support started for each browser:

Chrome 34.0 Apr 2014
Firefox 38.0 May 2015
IE/Edge 16.0 Oct 2017
Opera 25.0 Oct 2014
Safari 9.0 Sept 2015

You may also like

#

  • Our HTML source Tag Reference
  • Our HTML picture Tag Reference
  • Our HTML sizes Attribute Reference
  • Our CSS Images Tutorial

Back to <source>

Từ khóa » Html Source Image Size