Autor Zpráva
hondziiikh
Profil
Ahoj, prosím o radu, mám obrázek, který má 16:9 rozlišení. A já potřebuju, aby byl jako background rodiče -> divu, a aby se deformoval vždy podle velikosti toho rodiče. takže aby bez ohledu na deformaci byl vždy této šířky i výšky.

S jquery si nastavuji výšku a šířku, která se mění velikostí okna, ale vždy se mi část obrázku buď ztrácí, že roztáhne pozadí se zachováním poměru tak, aby se celý vešel do prvku, nebo se roztáhne jen podle kratší strany.

Při startu mám něco takového
div {
    width: 100%;
    min-height:400px;
    background: red url(../img/background.jpg) no-repeat;
}
a jquery upravuje (hezky to rozepíšu)
$( window ).ready(function() {    
    vyska = $(window).height();
    sirka = $(window).width();

    $("#celek").css("background", "red url(img/background.jpg) no-repeat center top fixed");
    $("#celek").css("height", vyska);
    $("#celek").css("width", sirka);
    $("#celek").css("background-size", "100%,100%");
});
Tohle mi správně nastaví šířku, ale výška se mění podle šířky. Já chci aby to bylo fullscreen i s deformací, 4rohy obrázku se vždy dotýkají 4 rohů prohlížeče :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: