"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageDefaultExample = 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 = {
    src: 'http://via.placeholder.com/350x150',
    // Show a border around the image (just for demonstration purposes)
    styles: function (props) { return ({ root: { border: '1px solid ' + props.theme.palette.neutralSecondary } }); },
};
var ImageDefaultExample = function () { return (React.createElement("div", null,
    React.createElement("p", null,
        "With no ",
        React.createElement("code", null, "imageFit"),
        " property set, the ",
        React.createElement("code", null, "width"),
        " and ",
        React.createElement("code", null, "height"),
        " props control the size of the frame. Depending on which of those props is used, the image may scale to fit the frame."),
    React.createElement("p", null,
        "Without a ",
        React.createElement("code", null, "width"),
        " or ",
        React.createElement("code", null, "height"),
        " specified, the frame remains at its natural size and the image will not be scaled."),
    React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: "Example with no image fit value and no height or width is specified." })),
    React.createElement("p", null, "If only a width is provided, the frame will be set to that width. The image will scale proportionally to fill the available width."),
    React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: "Example with no image fit value and only width is specified.", width: 600 })),
    React.createElement("p", null, "If only a height is provided, the frame will be set to that height. The image will scale proportionally to fill the available height."),
    React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: "Example with no image fit value and only height is specified.", height: 100 })),
    React.createElement("p", null,
        "If both width and height are provided, the frame will be set to that width and height. The image will scale to fill both the available width and height. ",
        React.createElement("strong", null, "This may result in a distorted image.")),
    React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { alt: "Example with no image fit value and height or width is specified.", width: 100, height: 100 })))); };
exports.ImageDefaultExample = ImageDefaultExample;
//# sourceMappingURL=Image.Default.Example.js.map