Vyplnění plochy obrázkem
Vlastností object-fit
můžeš specifikovat, jak má obrázek vyplnit omezenou plochu. Pokud obrázku nastavíš rozměry, které mají jiný poměr stran, obrázek se deformuje.
img {
width: 100px;
height: 100px;
}
Nastavením img { object‑fit: cover; }
obrázku řekneš, že se má případně oříznout, aby zabránil deformaci. Hodnotou contain
zabráníš deformaci i ořezu, ale kolem obrázku může vzniknout prázdné místo.
Ukázku najdeš například na MDN.
S object-fit: cover
se občas používá i doplňková vlastnost object-position
, kterou je možné dospecifikovat, v které části obrázku je to nejduležitější, co se nemá ořezávat.
Dobrovolný úkol
Postupuj podle zadání na github.com/…/Cviceni-CSS-grid-galerie.