define(["require", "exports", "tslib", "@fluentui/react/lib/Image", "react"], function (require, exports, tslib_1, Image_1, React) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ImageCenterCoverExample = 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.centerCover,
        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 } }); },
    };
    var ImageCenterCoverExample = function () {
        return (React.createElement("div", null,
            React.createElement("p", null,
                "Setting the ",
                React.createElement("code", null, "imageFit"),
                " property to ",
                React.createElement("code", null, "ImageFit.centerCover"),
                " 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.cover"),
                "."),
            React.createElement("p", null, "This image is smaller than the frame, so it's centered and rendered at its natural size."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/100x150", alt: 'Example of the image fit value "centerCover" on an image smaller than the frame.' })),
            React.createElement("p", null, "This image has a wider aspect ratio (more landscape) than the frame but is not as tall as the frame, so it's rendered at its natural size while cropping the sides."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/300x100", alt: 'Example of the image fit value "centerCover" on an image wider than the frame.' })),
            React.createElement("p", null, "This image has a taller aspect ratio (more portrait) than the frame but is not as wide as the frame, so it's rendered at its natural size while cropping the top and bottom."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/100x300", alt: 'Example of the image fit value "centerCover" on an image taller than the frame.' })),
            React.createElement("p", null, "These images are taller and wider than the frame, so they grow just enough to \"cover\" the frame area."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/400x500", alt: 'Example of the image fit value "centerCover" on an image taller and wider than the frame.' })),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/500x400", alt: 'Example of the image fit value "centerCover" on an image taller and wider than the frame.' }))));
    };
    exports.ImageCenterCoverExample = ImageCenterCoverExample;
});
//# sourceMappingURL=Image.CenterCover.Example.js.map