mdn/html/1_multimedia_and_embedding/4_responsive_images

4_responsive_images

dz / mdn / html / 1_multimedia_and_embedding / 4_responsive_images

Summary

Responsive Images

Node Tree

Nodes

responsive_images
content Responsive Images
children art_direction_problem, images_diff_screen_sizes_resolutions (description), optimal_res_based_on_screen, resolution_switching_problem, responsive_design (larger topic it relates to)

responsive_design
content Responsive Design
parents responsive_images

images_diff_screen_sizes_resolutions
content Images that work with differing screen sizes, resolutions, etc
parents responsive_images

art_direction_problem
content Art Direction Problem
children tag_picture, differently_cropped_for_layouts
parents responsive_images

differently_cropped_for_layouts
content Differently cropped for different layouts
parents art_direction_problem

resolution_switching_problem
content Resolution switching problem
children resolution_switching
parents responsive_images

optimal_res_based_on_screen
content Find optimal resolution based on screen size
parents responsive_images

tag_picture
content <picture>
children picture_contains_source_elements
parents mdn/html/elements, art_direction_problem

resolution_switching
content Resolution Switching
children srcset_sizes_attr, x_descriptors
parents resolution_switching_problem

srcset_sizes_attr
content Srcset and sizes attributes
children sizes_attr, srcset_attr
parents resolution_switching

srcset_attr
content srcset
children image_filename, intrinsic_width_pixels
parents srcset_sizes_attr

intrinsic_width_pixels
content Intrinsic width in pixels
parents srcset_attr

image_filename
content Image filename
parents srcset_attr

sizes_attr
content sizes
children width_of_slot, media_condition
parents srcset_sizes_attr

media_condition
content Media Condition
children dont_use_media_condition_in_sizes
parents attr_media, sizes_attr

width_of_slot
content Width of the slot
parents sizes_attr

x_descriptors
content x-descriptors
children no_sizes_attr
parents resolution_switching

no_sizes_attr
content No sizes attribute used
parents x_descriptors

picture_contains_source_elements
content Element is a wrapper containing many source elements that provide different sources for the browser to choose from.
children tag_source, followed_by_img
parents tag_picture

tag_source
content <source>
children attr_media
parents mdn/html/elements, picture_contains_source_elements

attr_media
content Media attribute
children dont_use_media_condition_in_sizes, media_condition
parents tag_source

dont_use_media_condition_in_sizes
content don't use media condition in sizes when using the media attribute
parents attr_media, media_condition

followed_by_img
content Followed by <img> element
children img_mandatory
parents picture_contains_source_elements

img_mandatory
content <img> is mandatory, otherwise image doesn't appear
parents followed_by_img