Image autosize script

26. 8. 2011 13:45:40

Ahojte,

Hľadám nejaký script ktorý mi zabezpečí to, že sa obrázok bude automaticky naťahovať podľa toho, aké rozlíšenie používam.

Niečo ako toto:

http://www.antonygormley.com/

obrázok sa automaticky natiahne, pomer strán pekne zostáva. Skúste si zmenšovať a zvačšovať okno prehliadača, uvidíte ten efekt.

Pomôže mi niekto kde by som taký script zohnal ?

26. 8. 2011 13:45:40

https://webtrh.cz/diskuse/image-autosize-script#reply670845

Default

(94 hodnocení)

26. 8. 2011 13:55:52

Koukám že je to nakódovaý v HTML5.

No nejlepší bude prohlídnout a pochopit jak to funguje přímo na tom webu - tagy v html s obrazkama a javascript - antonygormley-home.js, a můžeš udělat s trochou úprav něco podobnýho ne? :-)

26. 8. 2011 13:55:52

https://webtrh.cz/diskuse/image-autosize-script#reply670844

grantorino

(1 hodnocení)

26. 8. 2011 14:01:56

Ok, požičiam si asi ten script a trochu si to prispôsobím.

26. 8. 2011 14:01:56

https://webtrh.cz/diskuse/image-autosize-script#reply670843

Tom

(6 hodnocení)

26. 8. 2011 15:22:56

Jednoduše - normálně stáhneš obrázek ve vysokým rozlišení a zobrazíš ho. Pak stačí v JS odchytit změnu velikosti okna a podle toho obrázek přizpůsobit ;) Doufám že pomohlo.

26. 8. 2011 15:22:56

https://webtrh.cz/diskuse/image-autosize-script#reply670842

BombajS

(4 hodnocení)

26. 8. 2011 16:18:01

a co něco jako width: 90%?

26. 8. 2011 16:18:01

https://webtrh.cz/diskuse/image-autosize-script#reply670841

Tom

(6 hodnocení)

26. 8. 2011 16:21:27

BombajS: hh, to bude ono :-)

26. 8. 2011 16:21:27

https://webtrh.cz/diskuse/image-autosize-script#reply670840

800XE

(8 hodnocení)

26. 8. 2011 16:52:11

a co něco jako width: 90%?

V tom případě se nebude zachovávat poměr stran a budou vznikat deformace.

Tady je takový nástřel:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script>
            $.fn.test = function() {
                var
                    $window = $(window),
                    $image = this,
                    width = $image.width(),
                    height = $image.height(),
                    minWidth = parseInt($image.css('min-width')),
                    minHeight = parseInt($image.css('min-height')),
                    maxWidth = parseInt($image.css('max-width')),
                    maxHeight = parseInt($image.css('max-height')),
                    ratio = !width || !height ? 1.33 : width / height,
                    resize = function() {
                        var
                            width = $window.width(),
                            height = $window.height();
                        if (parseInt(width / ratio) > height)
                            width = parseInt(height * ratio);
                        else
                            height = parseInt(width / ratio);
                        width = Math.max(width, minWidth);
                        height = Math.max(height, minHeight);
                        $image.css({
                            'width': Math.min(width, maxWidth || width),
                            'height': Math.min(height, maxHeight || height)
                        });
                    };
                $window.resize(resize);
                resize();
            };

$(function() {
                $('img').test();
            });
        </script>
        <style>
            body {
                margin: 0;
            }
            
            img {
                display: block;
                width: 500px;
                height: 300px;
                min-width: 250px;
                min-height: 150px;
                background: black;
            }
        </style>
    </head>    
    <body>
        <img />
    </body>
</html>

26. 8. 2011 16:52:11

https://webtrh.cz/diskuse/image-autosize-script#reply670839

BombajS

(4 hodnocení)

27. 8. 2011 23:48:44

Napsal 800XE;694195
V tom případě se nebude zachovávat poměr stran a budou vznikat deformace.

Aha, měl jsem zato, že když neuvedeme výšku, tak se změní automaticky v daném poměru. Dík za info

27. 8. 2011 23:48:44

https://webtrh.cz/diskuse/image-autosize-script#reply670838

Default

(94 hodnocení)

28. 8. 2011 16:15:27

Napsal BombajS;694666
Aha, měl jsem zato, že když neuvedeme výšku, tak se změní automaticky v daném poměru. Dík za info

Pokud se přecejen zachová poměr stran, musí být originální obrázek větší ... protože pokud bych měl obrázek 500px a někdo má 2x větší rozlišení, obrázek se roztáhne na 1000px a kvalita se o dost zhorší ...

P.S.: Na tom webu to tak mají taky, cca 1450px originální velikost ;-)

28. 8. 2011 16:15:27

https://webtrh.cz/diskuse/image-autosize-script#reply670837

Pro odpověď se přihlašte.

Přihlásit