Galeria zdjęć - dynamiczne ustalanie rozmiarów obrazków

Witam, piszę galerię zdjęć na stronę. Po kliknięciu miniaturki wyświetla się duże zdjęcie, a reszta się przyciemnia. W jaki sposób zrobić tak, żeby to duże zdjęcie wyświetlało się na środku, a małe dynamicznie zmieniało rozmiar proporcjonalnie do rozmiaru okna. Napisałem taki kod:

.Gallery {
    height: 200px;
    width: auto;
    margin: 2px 2px 2px 2px;
    padding: 0;
}

    .Gallery:hover {
        box-shadow: 0 0 10px 1px black;
        border-radius: 10px 10px 10px 10px;
    }

.GalleryShadow {
    top: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 100;
    background-color: black;
    opacity: 0.7;
    width: 100%;
    height: 100%;
}

.GalleryImageBox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 101;
    width: 100%;
    height: 100%;
    padding: 20px 0px 20px 0px;
    margin: auto auto auto auto;
}

    .GalleryImageBox > img {

    }

<img src="/Album/GetThumb/1.jpg" alt="Zdjęcie" class="Gallery" data-ajax="true" data-href="/Album/GetImage/1.jpg" />

/// <reference path="../Libraries/jQuery/jquery.d.ts" />
var GalleryModule = (function () {
    function GalleryModule(Image) {
        this.HttpUrl = Image.getAttribute("data-href");
        this.HtmlShadowElement = document.createElement("div");
        this.HtmlShadowElement.classList.add("GalleryShadow");
        this.HtmlImageBox = document.createElement("div");
        this.HtmlImageBox.classList.add("GalleryImageBox");
        this.HtmlImageBox.innerHTML = "<img src=\"" + this.HttpUrl + "\" \>";
        document.body.appendChild(this.HtmlImageBox);
        document.body.appendChild(this.HtmlShadowElement);
        this.HtmlImage = this.HtmlImageBox.getElementsByTagName("img")[0];
    }
    GalleryModule.prototype.CloseImage = function () {
        document.body.removeChild(this.HtmlShadowElement);
        document.body.removeChild(this.HtmlImageBox);
    };

    GalleryModule.prototype.AddEvents = function () {
        var _this = this;
        this.HtmlShadowElement.onclick = function () {
            _this.CloseImage();
        };
        this.HtmlImageBox.onclick = function () {
            _this.CloseImage();
        };
    };
    return GalleryModule;
})();
$(document).on("click", "img[data-ajax=true]", function (e) {
    e.preventDefault();
    var Image = new GalleryModule(e.currentTarget);
    Image.AddEvents();
});
//# sourceMappingURL=GalleryModule.js.map

jeżeli byłbyś w stanie sam stworzyć taki kod - taki problem nie byłby żadnym problemem.

zostaje więc opcja, że kopiujesz kod

więc zamiast kopiować kodu - po prostu użyj jakiejś biblioteki, która temat rozwiąże za Ciebie

A problem rozwiązałem w taki sposób:

    ResizeImage():void {
        var TextCSS:any = "";
        TextCSS += "max-width: " + (window.innerWidth - 40) + "px;";
        TextCSS += "max-height: " + (window.innerHeight - 40) + "px;";
        this.HtmlImage.style.cssText = TextCSS;
    }