define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Image"], function (require, exports, tslib_1, React, Image_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ImageCenterExample = void 0;
    // 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: Image_1.ImageFit.center,
        width: 350,
        height: 150,
        // Show a border around the image (just for demonstration purposes)
        styles: function (props) { return ({ root: { border: '1px solid ' + props.theme.palette.neutralSecondary } }); },
    };
    var ImageCenterExample = function () {
        return (React.createElement("div", null,
            React.createElement("p", null,
                "Setting the ",
                React.createElement("code", null, "imageFit"),
                " property to ",
                React.createElement("code", null, "ImageFit.center"),
                " behaves the same as",
                ' ',
                React.createElement("code", null, "ImageFit.none"),
                ", while centering the image within the frame."),
            React.createElement("p", null, "This image is larger than the frame, so all sides are cropped to center the image."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/800x300", alt: 'Example of the image fit value "center" on an image larger than the frame.' })),
            React.createElement("p", null, "This image is smaller than the frame, so there is empty space within the frame. The image is centered in the available space."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/100x100", alt: 'Example of the image fit value "center" on an image smaller than the frame.' }))));
    };
    exports.ImageCenterExample = ImageCenterExample;
});
//# sourceMappingURL=Image.Center.Example.js.map