масштабировать изображение в div после загрузки в комплекте с jQuery - PullRequest
Новая
       16

масштабировать изображение в div после загрузки в комплекте с jQuery

4 голосов
/ 11 мая 2010

У меня есть несколько миниатюр, и когда вы нажимаете на них, у меня появляется модальное поле с DIV, которое я хочу масштабировать на 50% по массе в час.
Я хотел бы знать, если следующий метод для масштабирования является допустимым и кросс-браузер для изображения 800x530px: 

#foo-img { width: 100%; height: 100%; }
#foo-div {
    width: 400px; height: 265px;
    padding: 10px; background: black;
}

<div id="foo-div">
    <img id="foo-img" src="img/003.jpg" />
</div>

Я не могу просто установить атрибуты # foo-img w / h, так как каждый раз, когда я загружаю новое изображение, оно уменьшается на 50%! Вот кое-что, что работает, но мне кажется, что кода очень много .. 

        var rnd = Math.floor(Math.random() * 101)

        $("a.loadimg").click(function() {
            // resets the DIV
            imgLoadReset();
            var imgPath = "images/" + $(this).text() + "?" + rnd;
            imgLoad(imgPath);
            return false;
        });

        function imgLoad(imgPath) {
            $("#foo-img").hide()
            .one('load', function() {
                imgLoadComplete();
            })
            .attr("src", imgPath)
            .each(function() {
                if(this.complete) $(this).trigger('load');
            });
        }           

        function imgLoadComplete() {
            // after the image is completely loaded, we can get the w/h of the image
            var imgW = $("#foo-img").width() / 2;
            var imgH = $("#foo-img").height() / 2;

            // set div to half image size           
            $("#foo-div").css({ "width": imgW, "height": imgH });
            // this should scale the image inside the div
            $("#foo-img").css({ "width": "100%", "height": "100%" });

            $("#foo-img").show();
        }

        function imgLoadReset() {
            // delete w/h attributes otherwise it doesn't work
            $("#foo-img").css({ "width": "", "height": "" });
            // clear image with a blank
            $("#foo-img").attr("src", "about:blank");
        }

HTML 

<div id="foo-div">
    <img id="foo-img" src="about:blank" />
</div>
<hr>
<a class="loadimg" href="#">001.jpg</a> | 
<a class="loadimg" href="#">002.jpg</a> | 
<a class="loadimg" href="#">003.jpg</a> | 
<a class="loadimg" href="#">004.jpg</a>

1 Ответ

1 голос
/ 09 июля 2012

Используйте 

img {
    max-width: 100%;
    width: auto;
    height: auto;
}

для ваших изображений; указав желаемую ширину (в пикселях) их контейнерных элементов.

...