Skip to content

Plain image

Description: Plain image set to size > automatically adjust with no additional CSS applied

Current behavior (pre-ungate): Should be the width/height set via the attributes but if it goes beyond 100% of its container the width will cap at the width of the container and the height will scale proportionally

image 51

Max-width set

Description: Image with max-width of 100px !important set (overrides inline 100%)

Current behavior (pre-ungate): Width should be 100px and height should scale proportionally

image 51

Max-height set

Description: Image with max-height of 50px set

Current behavior (pre-ungate): Height should be 50px and width should scale proportionally

image 51

Max-width + height auto set (redundant)

This case is covered by max-width set (height is already set to auto in this case so omitting this

Max-height + width auto set

Description: Max-height of 100px and width of auto set

Current behavior (pre-ungate): Image should be 100px tall in this case (it is naturally bigger so it respects the max) and the width should scale proportionally

image 51

Max-width + height set

Description: Max-width of 100px !important and height of 50px !important set

Current behavior (pre-ungate): Image should be 50px tall and up to 100px wide (if the natural proportions for the 50px tall image are wider than 100px the image will look distorted but that is expected)

image 51

Max-height + width set

Description: Max-height of 100px and width of 50px set

Current behavior (pre-ungate): Image should be 50px wide and up to 100px tall (if the natural proportions for the 50px wide image are taller than 100px the image will look distorted but that is expected)

image 51

Min-width set

Description: Min-width of 100px set

Current behavior (pre-ungate): If image is smaller than 100px it will be set to be 100px wide and the height should scale proportionally

ryan-jacobson-MNXLADfHZO8-unsplash

Min-height set

Description: Min-height of 150px set

Current behavior (pre-ungate): If image is smaller than 150px in height than it should take on that height and width should scale proportionally 

ryan-jacobson-MNXLADfHZO8-unsplash

Min-width and height auto set

This case is covered by min-width set (height is already set to auto in this case so omitting this

Min-height and width auto set

Description: Min-height of 150px and width of auto set

Current behavior (pre-ungate): If image is smaller than 150px in height than it should take on that height and width should scale proportionally 

ryan-jacobson-MNXLADfHZO8-unsplash

Min-width and height set

Description: Min-width of 100px and height of 100px !important set

Current behavior (pre-ungate): If image is smaller than 100px wide it would scale to that and take a height of 100px. This could cause the image to be distorted

ryan-jacobson-MNXLADfHZO8-unsplash

Min-height and width set

Description: Min-height of 200px and width of 200px set

Current behavior (pre-ungate): If image is smaller than 200px tall it would scale to that and take a width of 200px. This could cause the image to be distorted

ryan-jacobson-MNXLADfHZO8-unsplash

Height + width explicitly set

Description: Height of 100px !important and width of 100px 

Current behavior (pre-ungate):
Image should take these exact dimensions

image 43

Height auto + width set

This case is covered by width set (height is already set to auto in this case so omitting this

Width auto + height set

Description: Width of auto and height of 100px !important set

Current behavior (pre-ungate): Image should be 100px tall and width should scale proportionally

image 43

Height set

Description: Height set to 100px !important

Current behavior (pre-ungate): Image should be 100px tall and width should scale proportionally

image 43

Width set

Description: Image set to 100px wide

Current behavior (pre-ungate): Image should be 100px wide (unless that is more than container width) and height should scale proportionally

image 43