"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageContainExample = 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.contain,
    src: 'http://via.placeholder.com/700x300',
    // Show a border around the image (just for demonstration purposes)
    styles: function (props) { return ({ root: { border: '1px solid ' + props.theme.palette.neutralSecondary } }); },
};
var ImageContainExample = function () {
    return (React.createElement("div", null,
        React.createElement("p", null,
            "Setting the ",
            React.createElement("code", null, "imageFit"),
            " property to ",
            React.createElement("code", null, "ImageFit.contain"),
            " will scale the image up or down to fit the frame, while maintaining its natural aspect ratio and without cropping the image."),
        React.createElement("p", null, "This image has a wider aspect ratio (more landscape) than the frame, so it's scaled to fit the width and centered in the available vertical space."),
        React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: 'Example of the image fit value "contain" on an image wider than the frame.', width: 200, height: 200 })),
        React.createElement("p", null, "This image has a taller aspect ratio (more portrait) than the frame, so it's scaled to fit the height and centered in the available horizontal space."),
        React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: 'Example of the image fit value "contain" on an image taller than the frame.', width: 300, height: 50 }))));
};
exports.ImageContainExample = ImageContainExample;
//# sourceMappingURL=Image.Contain.Example.js.map