Vytvořit čtverec pomocí CSS není nic složitého, prostě zadáte hodnoty pro šířku i výšku stejné. Co ale, když se má čtverec přizpůsobovat šířce okolí? Existuje na to jednoduchý návod, který najdete v tomto příspěvku.
Ukázka základního responsivního čtverce
Nejdříve si připravíme HTML:
<div class="ctverec">
</div>
A poté přidáme CSS:
.ctverec {
width: 100%; /* Nebo kolik potřebujete, toto je variabiní */
}
.ctverec::after {
content: "";
display: block;
padding-bottom: 100%;
}
Jak vidíte tvar čtverce nám udržuje pseudo-element ::after pomocí atributu padding-bottom: 100%;
Pokud byste chtěli docílit responsivního obdelníku, tak můžete jednoduše změnit hodnotu atributu padding-bottom. Například, pokud chcete, aby obdelník udržovat poměr stran 4:3, tak nastavíte hodnotu 75%. U složitějších poměrů stran použijte metodu calc().
Responsivní čtverec s obsahem
Pravděpodobně budete chtít do Vašeho čtverce vložit i nějaký obsah, když jej vložíte do předchozí ukázky, tak se Vám stane to, že se Vám o výšku obsahu Váš čtverec natáhne a přestane býti čtvercem. Co s tím?

Řešením bude vložení dalšího div elementu dovnitř čtverce:
<div class="ctverec">
<div class="obsah">
Obsah
</div>
</div>
A nastavení pozice obsahu vůči čtverci bude absolutní:
.ctverec {
width: 100%; /* Nebo kolik potřebujete, toto je variabiní */
background:red;
position: relative; /* aby .obsah mohl být v pozici absolutní */
}
.ctverec::after {
content: "";
display: block;
padding-bottom: 100%;
}
.obsah{
width:100%;
height:100%;
position: absolute;
}
Výsledek pak bude vypadat takto:

Uvnitř obsahu si pak můžete dělat co chcete. Často je třeba obsah vycentrovat jak na výšku, tak na šířku. K tomu používám toto:
.center-center{
display: flex;
align-items:center;
justify-content: center;
}
You must log in to post a comment.