Responsivní čtverec

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;
}

Zobrazeno 64 krát.