Images are presented inconsistently in docs

[mcoker]

trafficstars

Curious if we could normalize any of these. I'll also say that on top of these, there are a lot of images in the docs that are not within any kind of class/wrapper - so those are either left-aligned with the content if they're less than the width of the content wrapper, or they consume 100% of the content width with no max-width.

.ws-docs-content-img

• will only grow up to 700px
• centers itself horizontally
• centers its child horizontally (if the image inside is less than 700px)
• Button docs use this with a bunch of varied image sizes - https://www.patternfly.org/components/button/design-guidelines

https://github.com/patternfly/patternfly-org/blob/b455d81018a53a3986a2dca9f12628d179fe8f7e/packages/documentation-site/patternfly-docs/content/design-guidelines/components/components.css#L1-L6

.ws-image

• centers its child horizontally
• same as above but will grow to 100% of the available width instead of a max of 700px

https://github.com/patternfly/patternfly-org/blob/b455d81018a53a3986a2dca9f12628d179fe8f7e/packages/documentation-framework/templates/mdx.css#L19-L21

.ws-images

• centers itself horizontally
• has a max-width of 600px
• Same as the first one except 600px instead of 700px and it will not center its children, so if an image less than 600px wide is passed, it will be left aligned within the container.

https://github.com/patternfly/patternfly-org/blob/b455d81018a53a3986a2dca9f12628d179fe8f7e/packages/site/src/content/get-started/get-started.css#L5-L8