|
+
3.9 Sizing Images: the ‘background-size’ property |
|---|
|
background-intrinsic-001 |
= |
SVG |
Background Intrinsic Sizes: No intrinsic size
- A background image with no intrinsic size covers the entire padding box.
|
|
background-intrinsic-002 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Width
- A background image with only an intrinsic width covers its intrinsic width and the height of the padding box.
|
|
background-intrinsic-003 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Height
- A background image with only an intrinsic height covers its intrinsic height and the width of the padding box.
|
|
background-intrinsic-004 |
= |
OptionalSVG |
Background Intrinsic Sizes: Intrinsic Ratio (Match Heights)
- A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
|
|
background-intrinsic-005 |
= |
OptionalSVG |
Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)
- A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
|
|
background-intrinsic-006 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Percentage Width and Height
- A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
|
|
background-intrinsic-007 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Width and Ratio
- A missing background image height is calculated from the width and the ratio.
|
|
background-intrinsic-008 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Height and Ratio
- A missing background image width is calculated from the height and the ratio.
|
|
background-intrinsic-009 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Width and Height (Vector)
- A background with an intrinsic width and height is drawn at that size.
|
|
background-intrinsic-010 |
= |
SVG |
Background Intrinsic Sizes: Intrinsic Width and Height (Raster)
- A background with an intrinsic width and height is drawn at that size.
|
|
background-size-001 |
|
DOM/JSScript |
background-size - initial and supported values
- Check if background-size initial value is auto and supports values auto, cover and contain
|
|
background-size-002 |
= |
Bitmaps |
background-size - initial value
- Check if 'background-size' with initial value implies to the intrinsic width and height of the image are to be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
|
|
background-size-003 |
|
|
Value of 'auto' is used for y dimension in 'background-size'
- An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.
|
|
background-size-005 |
= |
Bitmaps |
background-size - one auto keyword value
- Check if 'background-size' has only one value 'auto', then such value is the width of the correspoding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width and height of the background-size in this test should be 60px and 60px.
|
|
background-size-006 |
= |
Bitmaps |
background-size - one <length> value
- Check if 'background-size' has only one length value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
|
|
background-size-007 |
= |
Bitmaps |
background-size - one <length> value at minimum
- Check if 'background-size' is '0px', minimum width of the positioning area in length, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
|
|
background-size-008 |
= |
Bitmaps |
background-size - one <length> value at maximum
- Check if 'background-size' is '100px', maximum width of the positioning area in length, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
|
|
background-size-009 |
= |
Bitmaps |
background-size - one <percentage> value
- Check if 'background-size' has only one percentage value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. A percentage is relative to the dimensions of the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
|
|
background-size-010 |
= |
Bitmaps |
background-size - one <percentage> value at minimum
- Check if 'background-size' is '0%', minimum width of the positioning area in percentage, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
|
|
background-size-011 |
= |
Bitmaps |
background-size - one <percentage> value at maximum
- Check if 'background-size' is '100%', maximum width of the positioning area in percentage, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
|
|
background-size-012 |
= |
Bitmaps |
background-size - two auto keyword values
- Check if 'background-size' has two values 'auto', then the intrinsic width and/or height of the image should be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
|
|
background-size-013 |
= |
Bitmaps |
background-size - one auto keyword and one <length> values
- Check if 'background-size' has one 'auto' and one length values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width of the background-size in this test should be 100px.
|
|
background-size-014 |
= |
Bitmaps |
background-size - one auto keyword and one <percentage> values
- Check if 'background-size' has one 'auto' and one percentage values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. A percentage is relative to the dimensions of the background positioning area. Therefore the used width of the background-size in this test should be 45px.
|
|
background-size-015 |
= |
Bitmaps |
background-size - one <length> and one auto keyword values
- Check if 'background-size' has one length and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
|
|
background-size-016 |
= |
Bitmaps |
background-size - two <length> values
- Check if 'background-size' has two length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.
|
|
background-size-017 |
= |
Bitmaps |
background-size - one <length> and one <percentage> values
- Check if 'background-size' has one length and one percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.
|
|
background-size-018 |
= |
Bitmaps |
background-size - one <percentage> and one auto keyword values
- Check if 'background-size' has one percentage and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
|
|
background-size-019 |
= |
Bitmaps |
background-size - one <percentage> and one <length> values
- Check if 'background-size' has one percentage and one length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.
|
|
background-size-020 |
= |
Bitmaps |
background-size - two <percentage> values
- Check if 'background-size' has two percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.
|
|
background-size-021 |
= |
Bitmaps |
background-size '100% 100%' with background-origin 'content-box'
- Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px.
|
|
background-size-022 |
|
Bitmaps |
background-size '50% auto' with background-origin 'border-box'
- Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px.
|
|
background-size-023 |
|
Bitmaps |
background-size '50% auto' with background-clip 'padding-box'
- Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px.
|
|
background-size-024 |
|
Bitmaps |
background-size '100% 100%' with background-clip 'content-box'
- Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box').
|
|
background-size-025 |
= |
Bitmaps |
background-size 'auto 61px' with background-repeat 'round'
- Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio.
|
|
background-size-026 |
= |
Bitmaps |
background-size 'auto' with background-repeat 'repeat'
- Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test).
|
|
background-size-027 |
= |
Bitmaps |
background-size '52px auto' with background-repeat 'repeat round'
- Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'.
|
|
background-size-028 |
= |
Bitmaps |
background-size '50px' with background-repeat 'repeat'
- Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions.
|
|
background-size-029 |
= |
Bitmaps |
background-size '52px auto' with background-repeat 'round repeat'
- Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically.
|
|
background-size-030 |
= |
Bitmaps |
background-size '25% 25%' with background-repeat 'repeat'
- Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), and then it is repeated in both directions.
|
|
background-size-031 |
= |
Bitmaps |
background-size '20% 30%' with background-repeat 'no-repeat round'
- Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled to 20% (50px in this test) of the background area.
|
|
background-size-032 |
|
Bitmaps |
background-size - applies to ::first-letter pseudo-element
- Check if background-size is able to apply to the ::first-letter pseudo-element.
|
|
background-size-033 |
|
Bitmaps |
background-size - applies to ::first-line pseudo-element
- Check if background-size is able to apply to the ::first-line pseudo-element.
|
|
background-size-034 |
= |
Bitmaps |
background-size - inherit keyword value
- Check if background-size supports inherit keyword as its property value.
|
|
background-size-035 |
= |
|
background-size conflicts with background-attachment
- The test passes if we can see the background-image is exactly same as above.
|
|
background-size-applies-to-block |
|
|
'Background-size' applied to element with a display of 'block'.
- 'Background-size' property applies to elements with 'display: block'.
|
|
background-size-aspect-ratio |
|
|
Original aspect ratio of image is maintained when 'background-size: auto' and 'background-repeat: round'
- If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored.
|
|
background-size-contain |
= |
Bitmaps |
background-size:contain
- The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
|
|
background-size-contain-001 |
= |
Bitmaps |
background-size - contain keyword value
- Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
|
|
background-size-contain-002 |
= |
Bitmaps |
background-size - contain keyword value
- Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
|
|
background-size-cover |
= |
Bitmaps |
background-size:cover
- The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
|
|
background-size-cover-001 |
= |
Bitmaps |
background-size - cover keyword value
- Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
|
|
background-size-cover-002 |
= |
Bitmaps |
background-size - cover keyword value
- Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
|
|
background-size-cover-contain-001 |
= |
Bitmaps |
background-size - cover value and contain value
- When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.
|
|
background-size-cover-contain-002 |
= |
Bitmaps |
background-size - cover value and contain value
- When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.
|
|
background-size-vector-001 |
= |
SVG |
background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
background-size-vector-002 |
= |
SVG |
background-size: 16px auto; for nonpercent-width-nonpercent-height.svg
|
|
background-size-vector-003 |
= |
SVG |
background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
background-size-vector-004 |
= |
SVG |
background-size: 16px auto; for nonpercent-width-omitted-height.svg
|
|
background-size-vector-005 |
= |
SVG |
background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg
|
|
background-size-vector-006 |
= |
SVG |
background-size: 16px auto; for nonpercent-width-percent-height.svg
|
|
background-size-vector-007 |
= |
SVG |
background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
background-size-vector-008 |
= |
SVG |
background-size: 16px auto; for omitted-width-nonpercent-height.svg
|
|
background-size-vector-009 |
= |
SVG |
background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg
|
|
background-size-vector-010 |
= |
SVG |
background-size: 16px auto; for omitted-width-omitted-height.svg
|
|
background-size-vector-011 |
= |
SVG |
background-size: 16px auto; for omitted-width-percent-height-viewbox.svg
|
|
background-size-vector-012 |
= |
SVG |
background-size: 16px auto; for omitted-width-percent-height.svg
|
|
background-size-vector-013 |
= |
SVG |
background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg
|
|
background-size-vector-014 |
= |
SVG |
background-size: 16px auto; for percent-width-nonpercent-height.svg
|
|
background-size-vector-015 |
= |
SVG |
background-size: 16px auto; for percent-width-omitted-height-viewbox.svg
|
|
background-size-vector-016 |
= |
SVG |
background-size: 16px auto; for percent-width-omitted-height.svg
|
|
background-size-vector-017 |
= |
SVG |
background-size: 16px auto; for percent-width-percent-height-viewbox.svg
|
|
background-size-vector-018 |
= |
SVG |
background-size: 16px auto; for percent-width-percent-height.svg
|
|
background-size-vector-019 |
= |
SVG |
background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
background-size-vector-020 |
= |
SVG |
tall background-size: auto; for nonpercent-width-nonpercent-height.svg
|
|
background-size-vector-021 |
= |
SVG |
background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
background-size-vector-022 |
= |
SVG |
background-size: auto; for nonpercent-width-omitted-height.svg
|
|
background-size-vector-023 |
= |
SVG |
background-size: auto; for nonpercent-width-percent-height-viewbox.svg
|
|
background-size-vector-024 |
= |
SVG |
background-size: auto; for nonpercent-width-percent-height.svg
|
|
background-size-vector-025 |
= |
SVG |
background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
background-size-vector-026 |
= |
SVG |
background-size: auto; for omitted-width-nonpercent-height.svg
|
|
background-size-vector-027 |
= |
SVG |
background-size: auto; for omitted-width-omitted-height-viewbox.svg
|
|
background-size-vector-028 |
= |
SVG |
background-size: auto; for omitted-width-omitted-height.svg
|
|
background-size-vector-029 |
= |
SVG |
background-size: auto; for omitted-width-percent-height-viewbox.svg
|
|
box-shadow-003 |
|
|
Layering of box shadows
- Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom.
|
|
css3-background-size-001 |
= |
|
background size property
|
|
css3-background-size-contain |
= |
|
CSS3 background-size:contain
|
|
diagonal-percentage-vector-background |
= |
SVG |
scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal
|
|
tall--auto--omitted-width-percent-height |
|
SVG |
background-size: auto; for omitted-width-percent-height.svg
|
|
tall--auto--percent-width-nonpercent-height |
|
SVG |
background-size: auto; for percent-width-nonpercent-height.svg
|
|
tall--auto--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto; for percent-width-nonpercent-height-viewbox.svg
|
|
tall--auto--percent-width-omitted-height |
|
SVG |
background-size: auto; for percent-width-omitted-height.svg
|
|
tall--auto--percent-width-omitted-height-viewbox |
|
SVG |
background-size: auto; for percent-width-omitted-height-viewbox.svg
|
|
tall--auto--percent-width-percent-height |
|
SVG |
background-size: auto; for percent-width-percent-height.svg
|
|
tall--auto--percent-width-percent-height-viewbox |
|
SVG |
background-size: auto; for percent-width-percent-height-viewbox.svg
|
|
tall--auto-32px--nonpercent-width-nonpercent-height |
|
SVG |
background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
|
|
tall--auto-32px--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
tall--auto-32px--nonpercent-width-omitted-height |
|
SVG |
background-size: auto 32px; for nonpercent-width-omitted-height.svg
|
|
tall--auto-32px--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
|
|
tall--auto-32px--nonpercent-width-percent-height |
|
SVG |
background-size: auto 32px; for nonpercent-width-percent-height.svg
|
|
tall--auto-32px--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
|
|
tall--auto-32px--omitted-width-nonpercent-height |
|
SVG |
background-size: auto 32px; for omitted-width-nonpercent-height.svg
|
|
tall--auto-32px--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
|
|
tall--auto-32px--omitted-width-omitted-height |
|
SVG |
background-size: auto 32px; for omitted-width-omitted-height.svg
|
|
tall--auto-32px--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
|
|
tall--auto-32px--omitted-width-percent-height |
|
SVG |
background-size: auto 32px; for omitted-width-percent-height.svg
|
|
tall--auto-32px--omitted-width-percent-height-viewbox |
|
SVG |
background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
|
|
tall--auto-32px--percent-width-nonpercent-height |
|
SVG |
background-size: auto 32px; for percent-width-nonpercent-height.svg
|
|
tall--auto-32px--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
|
|
tall--auto-32px--percent-width-omitted-height |
|
SVG |
background-size: auto 32px; for percent-width-omitted-height.svg
|
|
tall--auto-32px--percent-width-omitted-height-viewbox |
|
SVG |
background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
|
|
tall--auto-32px--percent-width-percent-height |
|
SVG |
background-size: auto 32px; for percent-width-percent-height.svg
|
|
tall--auto-32px--percent-width-percent-height-viewbox |
|
SVG |
background-size: auto 32px; for percent-width-percent-height-viewbox.svg
|
|
tall--contain--height |
|
SVG |
background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
tall--contain--nonpercent-width-nonpercent-height |
|
SVG |
background-size: contain; for nonpercent-width-nonpercent-height.svg
|
|
tall--contain--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
tall--contain--nonpercent-width-omitted-height |
|
SVG |
background-size: contain; for nonpercent-width-omitted-height.svg
|
|
tall--contain--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
|
|
tall--contain--nonpercent-width-percent-height |
|
SVG |
background-size: contain; for nonpercent-width-percent-height.svg
|
|
tall--contain--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: contain; for nonpercent-width-percent-height-viewbox.svg
|
|
tall--contain--omitted-width-nonpercent-height |
|
SVG |
background-size: contain; for omitted-width-nonpercent-height.svg
|
|
tall--contain--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
|
|
tall--contain--omitted-width-omitted-height |
|
SVG |
background-size: contain; for omitted-width-omitted-height.svg
|
|
tall--contain--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: contain; for omitted-width-omitted-height-viewbox.svg
|
|
tall--contain--omitted-width-percent-height |
|
SVG |
background-size: contain; for omitted-width-percent-height.svg
|
|
tall--contain--omitted-width-percent-height-viewbox |
|
SVG |
background-size: contain; for omitted-width-percent-height-viewbox.svg
|
|
tall--contain--percent-width-nonpercent-height |
|
SVG |
background-size: contain; for percent-width-nonpercent-height.svg
|
|
tall--contain--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: contain; for percent-width-nonpercent-height-viewbox.svg
|
|
tall--contain--percent-width-omitted-height |
|
SVG |
background-size: contain; for percent-width-omitted-height.svg
|
|
tall--contain--percent-width-omitted-height-viewbox |
|
SVG |
background-size: contain; for percent-width-omitted-height-viewbox.svg
|
|
tall--contain--percent-width-percent-height |
|
SVG |
background-size: contain; for percent-width-percent-height.svg
|
|
tall--contain--percent-width-percent-height-viewbox |
|
SVG |
background-size: contain; for percent-width-percent-height-viewbox.svg
|
|
tall--contain--width |
|
SVG |
background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
tall--cover--height |
|
SVG |
background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
tall--cover--nonpercent-width-nonpercent-height |
|
SVG |
background-size: cover; for nonpercent-width-nonpercent-height.svg
|
|
tall--cover--nonpercent-width-nonpercent-height--crisp |
|
SVG |
background-size: cover; for nonpercent-width-nonpercent-height.svg
|
|
tall--cover--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp |
|
SVG |
background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
tall--cover--nonpercent-width-omitted-height |
|
SVG |
background-size: cover; for nonpercent-width-omitted-height.svg
|
|
tall--cover--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
|
|
tall--cover--nonpercent-width-percent-height |
|
SVG |
background-size: cover; for nonpercent-width-percent-height.svg
|
|
tall--cover--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: cover; for nonpercent-width-percent-height-viewbox.svg
|
|
tall--cover--omitted-width-nonpercent-height |
|
SVG |
background-size: cover; for omitted-width-nonpercent-height.svg
|
|
tall--cover--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
|
|
tall--cover--omitted-width-omitted-height |
|
SVG |
background-size: cover; for omitted-width-omitted-height.svg
|
|
tall--cover--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: cover; for omitted-width-omitted-height-viewbox.svg
|
|
tall--cover--omitted-width-percent-height |
|
SVG |
background-size: cover; for omitted-width-percent-height.svg
|
|
tall--cover--omitted-width-percent-height-viewbox |
|
SVG |
background-size: cover; for omitted-width-percent-height-viewbox.svg
|
|
tall--cover--percent-width-nonpercent-height |
|
SVG |
background-size: cover; for percent-width-nonpercent-height.svg
|
|
tall--cover--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: cover; for percent-width-nonpercent-height-viewbox.svg
|
|
tall--cover--percent-width-omitted-height |
|
SVG |
background-size: cover; for percent-width-omitted-height.svg
|
|
tall--cover--percent-width-omitted-height-viewbox |
|
SVG |
background-size: cover; for percent-width-omitted-height-viewbox.svg
|
|
tall--cover--percent-width-percent-height |
|
SVG |
background-size: cover; for percent-width-percent-height.svg
|
|
tall--cover--percent-width-percent-height-viewbox |
|
SVG |
background-size: cover; for percent-width-percent-height-viewbox.svg
|
|
tall--cover--width |
|
SVG |
background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
wide--12px-auto--nonpercent-width-nonpercent-height |
|
SVG |
background-size: 12px auto; for nonpercent-width-nonpercent-height.svg
|
|
wide--12px-auto--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
wide--12px-auto--nonpercent-width-omitted-height |
|
SVG |
background-size: 12px auto; for nonpercent-width-omitted-height.svg
|
|
wide--12px-auto--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
wide--12px-auto--nonpercent-width-percent-height |
|
SVG |
background-size: 12px auto; for nonpercent-width-percent-height.svg
|
|
wide--12px-auto--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg
|
|
wide--12px-auto--omitted-width-nonpercent-height |
|
SVG |
background-size: 12px auto; for omitted-width-nonpercent-height.svg
|
|
wide--12px-auto--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
wide--12px-auto--omitted-width-omitted-height |
|
SVG |
background-size: 12px auto; for omitted-width-omitted-height.svg
|
|
wide--12px-auto--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg
|
|
wide--12px-auto--omitted-width-percent-height |
|
SVG |
background-size: 12px auto; for omitted-width-percent-height.svg
|
|
wide--12px-auto--omitted-width-percent-height-viewbox |
|
SVG |
background-size: 12px auto; for omitted-width-percent-height-viewbox.svg
|
|
wide--12px-auto--percent-width-nonpercent-height |
|
SVG |
background-size: 12px auto; for percent-width-nonpercent-height.svg
|
|
wide--12px-auto--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg
|
|
wide--12px-auto--percent-width-omitted-height |
|
SVG |
background-size: 12px auto; for percent-width-omitted-height.svg
|
|
wide--12px-auto--percent-width-omitted-height-viewbox |
|
SVG |
background-size: 12px auto; for percent-width-omitted-height-viewbox.svg
|
|
wide--12px-auto--percent-width-percent-height |
|
SVG |
background-size: 12px auto; for percent-width-percent-height.svg
|
|
wide--12px-auto--percent-width-percent-height-viewbox |
|
SVG |
background-size: 12px auto; for percent-width-percent-height-viewbox.svg
|
|
wide--auto--nonpercent-width-nonpercent-height |
|
SVG |
background-size: auto; for nonpercent-width-nonpercent-height.svg
|
|
wide--auto--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
wide--auto--nonpercent-width-omitted-height |
|
SVG |
background-size: auto; for nonpercent-width-omitted-height.svg
|
|
wide--auto--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
wide--auto--nonpercent-width-percent-height |
|
SVG |
background-size: auto; for nonpercent-width-percent-height.svg
|
|
wide--auto--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: auto; for nonpercent-width-percent-height-viewbox.svg
|
|
wide--auto--omitted-width-nonpercent-height |
|
SVG |
background-size: auto; for omitted-width-nonpercent-height.svg
|
|
wide--auto--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
wide--auto--omitted-width-omitted-height |
|
SVG |
background-size: auto; for omitted-width-omitted-height.svg
|
|
wide--auto--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: auto; for omitted-width-omitted-height-viewbox.svg
|
|
wide--auto--omitted-width-percent-height |
|
SVG |
background-size: auto; for omitted-width-percent-height.svg
|
|
wide--auto--omitted-width-percent-height-viewbox |
|
SVG |
background-size: auto; for omitted-width-percent-height-viewbox.svg
|
|
wide--auto--percent-width-nonpercent-height |
|
SVG |
background-size: auto; for percent-width-nonpercent-height.svg
|
|
wide--auto--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto; for percent-width-nonpercent-height-viewbox.svg
|
|
wide--auto--percent-width-omitted-height |
|
SVG |
background-size: auto; for percent-width-omitted-height.svg
|
|
wide--auto--percent-width-omitted-height-viewbox |
|
SVG |
background-size: auto; for percent-width-omitted-height-viewbox.svg
|
|
wide--auto--percent-width-percent-height |
|
SVG |
background-size: auto; for percent-width-percent-height.svg
|
|
wide--auto--percent-width-percent-height-viewbox |
|
SVG |
background-size: auto; for percent-width-percent-height-viewbox.svg
|
|
wide--auto-32px--nonpercent-width-nonpercent-height |
|
SVG |
background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
|
|
wide--auto-32px--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
wide--auto-32px--nonpercent-width-omitted-height |
|
SVG |
background-size: auto 32px; for nonpercent-width-omitted-height.svg
|
|
wide--auto-32px--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
|
|
wide--auto-32px--nonpercent-width-percent-height |
|
SVG |
background-size: auto 32px; for nonpercent-width-percent-height.svg
|
|
wide--auto-32px--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
|
|
wide--auto-32px--omitted-width-nonpercent-height |
|
SVG |
background-size: auto 32px; for omitted-width-nonpercent-height.svg
|
|
wide--auto-32px--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
|
|
wide--auto-32px--omitted-width-omitted-height |
|
SVG |
background-size: auto 32px; for omitted-width-omitted-height.svg
|
|
wide--auto-32px--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
|
|
wide--auto-32px--omitted-width-percent-height |
|
SVG |
background-size: auto 32px; for omitted-width-percent-height.svg
|
|
wide--auto-32px--omitted-width-percent-height-viewbox |
|
SVG |
background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
|
|
wide--auto-32px--percent-width-nonpercent-height |
|
SVG |
background-size: auto 32px; for percent-width-nonpercent-height.svg
|
|
wide--auto-32px--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
|
|
wide--auto-32px--percent-width-omitted-height |
|
SVG |
background-size: auto 32px; for percent-width-omitted-height.svg
|
|
wide--auto-32px--percent-width-omitted-height-viewbox |
|
SVG |
background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
|
|
wide--auto-32px--percent-width-percent-height |
|
SVG |
background-size: auto 32px; for percent-width-percent-height.svg
|
|
wide--auto-32px--percent-width-percent-height-viewbox |
|
SVG |
background-size: auto 32px; for percent-width-percent-height-viewbox.svg
|
|
wide--contain--height |
|
SVG |
background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
wide--contain--nonpercent-width-nonpercent-height |
|
SVG |
background-size: contain; for nonpercent-width-nonpercent-height.svg
|
|
wide--contain--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
wide--contain--nonpercent-width-omitted-height |
|
SVG |
background-size: contain; for nonpercent-width-omitted-height.svg
|
|
wide--contain--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
|
|
wide--contain--nonpercent-width-percent-height |
|
SVG |
background-size: contain; for nonpercent-width-percent-height.svg
|
|
wide--contain--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: contain; for nonpercent-width-percent-height-viewbox.svg
|
|
wide--contain--omitted-width-nonpercent-height |
|
SVG |
background-size: contain; for omitted-width-nonpercent-height.svg
|
|
wide--contain--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
|
|
wide--contain--omitted-width-omitted-height |
|
SVG |
background-size: contain; for omitted-width-omitted-height.svg
|
|
wide--contain--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: contain; for omitted-width-omitted-height-viewbox.svg
|
|
wide--contain--omitted-width-percent-height |
|
SVG |
background-size: contain; for omitted-width-percent-height.svg
|
|
wide--contain--omitted-width-percent-height-viewbox |
|
SVG |
background-size: contain; for omitted-width-percent-height-viewbox.svg
|
|
wide--contain--percent-width-nonpercent-height |
|
SVG |
background-size: contain; for percent-width-nonpercent-height.svg
|
|
wide--contain--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: contain; for percent-width-nonpercent-height-viewbox.svg
|
|
wide--contain--percent-width-omitted-height |
|
SVG |
background-size: contain; for percent-width-omitted-height.svg
|
|
wide--contain--percent-width-omitted-height-viewbox |
|
SVG |
background-size: contain; for percent-width-omitted-height-viewbox.svg
|
|
wide--contain--percent-width-percent-height |
|
SVG |
background-size: contain; for percent-width-percent-height.svg
|
|
wide--contain--percent-width-percent-height-viewbox |
|
SVG |
background-size: contain; for percent-width-percent-height-viewbox.svg
|
|
wide--contain--width |
|
SVG |
background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
wide--cover--height |
|
SVG |
background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
wide--cover--nonpercent-width-nonpercent-height |
|
SVG |
background-size: cover; for nonpercent-width-nonpercent-height.svg
|
|
wide--cover--nonpercent-width-nonpercent-height-viewbox |
|
SVG |
background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
wide--cover--nonpercent-width-omitted-height |
|
SVG |
background-size: cover; for nonpercent-width-omitted-height.svg
|
|
wide--cover--nonpercent-width-omitted-height-viewbox |
|
SVG |
background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
|
|
wide--cover--nonpercent-width-percent-height |
|
SVG |
background-size: cover; for nonpercent-width-percent-height.svg
|
|
wide--cover--nonpercent-width-percent-height-viewbox |
|
SVG |
background-size: cover; for nonpercent-width-percent-height-viewbox.svg
|
|
wide--cover--omitted-width-nonpercent-height |
|
SVG |
background-size: cover; for omitted-width-nonpercent-height.svg
|
|
wide--cover--omitted-width-nonpercent-height-viewbox |
|
SVG |
background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
|
|
wide--cover--omitted-width-omitted-height |
|
SVG |
background-size: cover; for omitted-width-omitted-height.svg
|
|
wide--cover--omitted-width-omitted-height-viewbox |
|
SVG |
background-size: cover; for omitted-width-omitted-height-viewbox.svg
|
|
wide--cover--omitted-width-percent-height |
|
SVG |
background-size: cover; for omitted-width-percent-height.svg
|
|
wide--cover--omitted-width-percent-height-viewbox |
|
SVG |
background-size: cover; for omitted-width-percent-height-viewbox.svg
|
|
wide--cover--percent-width-nonpercent-height |
|
SVG |
background-size: cover; for percent-width-nonpercent-height.svg
|
|
wide--cover--percent-width-nonpercent-height-viewbox |
|
SVG |
background-size: cover; for percent-width-nonpercent-height-viewbox.svg
|
|
wide--cover--percent-width-omitted-height |
|
SVG |
background-size: cover; for percent-width-omitted-height.svg
|
|
wide--cover--percent-width-omitted-height-viewbox |
|
SVG |
background-size: cover; for percent-width-omitted-height-viewbox.svg
|
|
wide--cover--percent-width-percent-height |
|
SVG |
background-size: cover; for percent-width-percent-height.svg
|
|
wide--cover--percent-width-percent-height-viewbox |
|
SVG |
background-size: cover; for percent-width-percent-height-viewbox.svg
|
|
wide--cover--width |
|
SVG |
background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
zero-height-ratio-5px-auto |
|
SVG |
zero height ratio, 5px auto
|
|
zero-height-ratio-auto-5px |
|
SVG |
zero height ratio, auto 5px
|
|
zero-height-ratio-auto-auto |
|
SVG |
zero height ratio, auto auto
|
|
zero-height-ratio-contain |
|
SVG |
zero height ratio, contain
|
|
zero-height-ratio-cover |
|
SVG |
zero height ratio, cover
|
|
zero-ratio-no-dimensions-5px-auto |
|
SVG |
zero ratio, no dimensions, 5px auto
|
|
zero-ratio-no-dimensions-auto-5px |
|
SVG |
zero ratio, no dimensions, auto 5px
|
|
zero-ratio-no-dimensions-auto-auto |
|
SVG |
zero ratio, no dimensions, auto auto
|
|
zero-ratio-no-dimensions-contain |
|
SVG |
zero ratio, no dimensions, contain
|
|
zero-ratio-no-dimensions-cover |
|
SVG |
zero ratio, no dimensions, cover
|
|
zero-width-ratio-5px-auto |
|
SVG |
zero height ratio, 5px auto
|
|
zero-width-ratio-auto-5px |
|
SVG |
zero height ratio, auto 5px
|
|
zero-width-ratio-auto-auto |
|
SVG |
zero width ratio, auto auto
|
|
zero-width-ratio-contain |
|
SVG |
zero width ratio, contain
|
|
zero-width-ratio-cover |
|
SVG |
zero width ratio, cover
|