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.ImageCoverExample = 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.cover,
        src: 'http://via.placeholder.com/500x500',
        // Show a border around the image (just for demonstration purposes)
        styles: function (props) { return ({ root: { border: '1px solid ' + props.theme.palette.neutralSecondary } }); },
    };
    var ImageCoverExample = function () {
        return (React.createElement("div", null,
            React.createElement("p", null,
                "Setting the ",
                React.createElement("code", null, "imageFit"),
                " property to ",
                React.createElement("code", null, "ImageFit.cover"),
                " will cause the image to scale up or down proportionally, while cropping from either the top and bottom or sides to completely fill the frame."),
            React.createElement("p", null, "This image has a wider aspect ratio (more landscape) than the frame, so it's scaled to fit the height and the sides are cropped evenly."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: 'Example of the image fit value "cover" on an image wider than the frame.', width: 150, height: 250 })),
            React.createElement("p", null, "This image has a taller aspect ratio (more portrait) than the frame, so it's scaled to fit the width and the top and bottom are cropped evenly."),
            React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: 'Example of the image fit value "cover" on an image taller than the frame.', width: 250, height: 150 }))));
    };
    exports.ImageCoverExample = ImageCoverExample;
});
//# sourceMappingURL=Image.Cover.Example.js.map