import { __assign } from "tslib";
import * as React from 'react';
import { Image, ImageFit } from '@fluentui/react/lib/Image';
// These props are defined up here so they can easily be applied to multiple Images.
// Normally specifying them inline would be fine.
var imageProps = {
    imageFit: ImageFit.centerContain,
    width: 200,
    height: 200,
    // Show a border around the image (just for demonstration purposes)
    styles: function (props) { return ({ root: { border: '1px solid ' + props.theme.palette.neutralSecondary } }); },
};
export var ImageCenterContainExample = function () {
    return (React.createElement("div", null,
        React.createElement("p", null,
            "Setting the ",
            React.createElement("code", null, "imageFit"),
            " property to ",
            React.createElement("code", null, "ImageFit.centerContain"),
            " will cause the image to scale up or down proportionally. Images smaller than their frame will be rendered as ",
            React.createElement("code", null, "ImageFit.center"),
            ", while images larger than either frame's height or width will render as ",
            React.createElement("code", null, "ImageFit.contain"),
            "."),
        React.createElement("p", null, "This image is smaller than the frame, so it's centered and rendered at its natural size."),
        React.createElement(Image, __assign({}, imageProps, { src: "http://via.placeholder.com/100x150", alt: 'Example of the image fit value "centerContain" on an image smaller than the frame.' })),
        React.createElement("p", null, "This image is wider than the frame, so it's contained."),
        React.createElement(Image, __assign({}, imageProps, { src: "http://via.placeholder.com/300x100", alt: 'Example of the image fit value "centerContain" on an image wider than the frame.' })),
        React.createElement("p", null, "This image is taller than the frame, so it's contained."),
        React.createElement(Image, __assign({}, imageProps, { src: "http://via.placeholder.com/100x300", alt: 'Example of the image fit value "centerContain" on an image taller than the frame.' })),
        React.createElement("p", null, "These images are taller and wider than the frame, so they are contained."),
        React.createElement(Image, __assign({}, imageProps, { src: "http://via.placeholder.com/400x500", alt: 'Example of the image fit value "centerContain" on an image taller and wider than the frame.' })),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement(Image, __assign({}, imageProps, { src: "http://via.placeholder.com/500x400", alt: 'Example of the image fit value "centerContain" on an image taller and wider than the frame.' }))));
};
//# sourceMappingURL=Image.CenterContain.Example.js.map