» Poradna » Web a internet

CSS velikost

 |   |  Microsoft Windows XP Chrome 27.0.1453.116

Ahoj, potřeboval bych poradit ohledně CSS stylu.Mám stránku, kterou mám pomocí divů rozdělenou na tři části - top, main a bottom. V top je nějaká hlavička, bottom je menu. Uprostřed je hlavní část, div označený jako "main". Mám nastavené škálování, tzn. div main má na výšku 60% monitoru. Teď bych potřeboval dovnitř tohoto divu umístit obrázek. Jenže bych chtěl, aby ten obrázek na výšku vyplnil celý div. Problém samozřejmě je, že já tu skutečnou výšku neznám, je to 60% monitoru uživatele. Když nastavím výšku obrázku na 100%, jednoduše se načte 100% velikost toho původního obrázku. Šlo by nějak nastavit aby se to celé vyplnilo? Tzn. aby obrázek automaticky měnil velikost tak, aby na výšku vyplnil div? (šířka aby zůstala tak, aby nedošlo ke zkreslení samozřejmě, tzn. v poměru k výšce, s tím že on je to vlastně čtverec, takže to by bylo shodné).

Mohlo by vás také zajímat

Odpovědi na otázku

 |   |  Microsoft Windows 7 Chrome 27.0.1453.116

Pokud jsem to dobře pochopil, vytvoř si třídu. .zvetsit { width:60%; height:co potřebuješ;}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 | Linux Chrome 27.0.1453.110

V CSS použij:#main { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}Případně místo hodnot cover použij dvě konkrétní hodnoty: auto 100%;Tedy: background-size: auto 100%;(a stejně tak i u těch řádků nad tím)První hodnota říká šířku, druhá výšku. Hodnota auto se dopočítá sama tak, aby se obrázek nedeformoval.

Souhlasím  |  Nesouhlasím  |  Odpovědět

Související témata: Main, Hlavní část, Zkreslení, Čtverec, Hlavička