office-ui-fabric-react/lib-amd/components/Image/examples/Image.CenterContain.Example.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "office-ui-fabric-react/lib/Image", "office-ui-fabric-react/lib/Label", "react"], function (require, exports, tslib_1, Image_1, Label_1, React) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ImageCenterContainExample = /** @class */ (function (_super) {
        tslib_1.__extends(ImageCenterContainExample, _super);
        function ImageCenterContainExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ImageCenterContainExample.prototype.render = function () {
            var imageProps = {
                imageFit: Image_1.ImageFit.centerContain,
                width: 200,
                height: 200
            };
            return (React.createElement("div", null,
                React.createElement("p", null, "Setting the imageFit property to \"centerContain\" will cause the image to scale up or down proportionally. Images smaller than their frame will be rendered as \"ImageFit.center\", while images larger than both either frame's height or width will render as \"ImageFit.contain\"."),
                React.createElement(Label_1.Label, null, "The 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://placehold.it/100x150", alt: "Example implementation of the property image fit using the centerContain value on an image smaller than the frame." })),
                React.createElement("br", null),
                React.createElement(Label_1.Label, null, "The image has a wider width than the frame so it's contained."),
                React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://placehold.it/300x100", alt: "Example implementation of the property image fit using the centerContain value on an image wider than the frame." })),
                React.createElement("br", null),
                React.createElement(Label_1.Label, null, "The image is taller than the frame so it's contained."),
                React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://placehold.it/100x300", alt: "Example implementation of the property image fit using the centerContain value on an image taller than the frame." })),
                React.createElement("br", null),
                React.createElement(Label_1.Label, null, "These images are taller and wider than the frame and so they are contained."),
                React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://placehold.it/400x500", alt: "Example implementation of the property image fit using the centerContain value on an image taller and wider than the frame." })),
                React.createElement("br", null),
                React.createElement(Image_1.Image, tslib_1.__assign({}, imageProps, { src: "http://placehold.it/500x400", alt: "Example implementation of the property image fit using the centerContain value on an image taller and wider than the frame." }))));
        };
        return ImageCenterContainExample;
    }(React.Component));
    exports.ImageCenterContainExample = ImageCenterContainExample;
});
//# sourceMappingURL=Image.CenterContain.Example.js.map