"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageNoneExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Image_1 = require("@fluentui/react/lib-commonjs/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: Image_1.ImageFit.none,
    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 ImageNoneExample = function () {
    return (React.createElement("div", null,
        React.createElement("p", null,
            "By setting the ",
            React.createElement("code", null, "imageFit"),
            " property to ",
            React.createElement("code", null, "ImageFit.none"),
            ", the image will remain at its natural size, even if the frame is made larger or smaller by setting the width or height props."),
        React.createElement("p", null, "This image is larger than the frame, so it's cropped to fit and positioned at the upper left."),
        React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/500x250", alt: 'Example of the image fit value "none" on an image larger than the frame.' })),
        React.createElement("p", null, "This image is smaller than the frame, so there's empty space within the frame and the image is positioned at the upper left."),
        React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://via.placeholder.com/100x100", alt: 'Example of the image fit value "none" on an image smaller than the frame.' }))));
};
exports.ImageNoneExample = ImageNoneExample;
//# sourceMappingURL=Image.None.Example.js.map