4_responsive_images

dz / mdn / html / 1_multimedia_and_embedding / 4_responsive_images

Summary

Responsive Images

Node Tree

• responsive_images
  • art_direction_problem
    • tag_picture
      • picture_contains_source_elements
        • tag_source
          • attr_media
            • dont_use_media_condition_in_sizes
            • media_condition
              • dont_use_media_condition_in_sizes
        • followed_by_img
          • img_mandatory
    • differently_cropped_for_layouts
  • images_diff_screen_sizes_resolutions
  • optimal_res_based_on_screen
  • resolution_switching_problem
    • resolution_switching
      • srcset_sizes_attr
        • sizes_attr
          • width_of_slot
          • media_condition
            • dont_use_media_condition_in_sizes
        • srcset_attr
          • image_filename
          • intrinsic_width_pixels
      • x_descriptors
        • no_sizes_attr
  • responsive_design

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