Někdy se může hodit mít na stránce obrázek kulatý, jaké existují možnosti?
Překreslení v grafickém editoru
Nejtrivialnější možnost je obrázek překreslit. Problém je, že to není moc universální (co až nebude kulatý vzhled žádoucí?).
Kulaté okraje (border-radius)
Od Internet Exploreru 9 lze použít CSS vlastnost border-radius. Stačí ji nastavit buď v polovině šířky obrázku, nebo jako 50 %.
#obrazek {border-radius: 50%}
Překrytí obrázekm
Pro starší prohlížeče je funkční řešení vytvořit obrázek s průhledným kruhem unitř a původní obrázek takto překrýt.
HTML
<div class='prekryti'>
<span></span>
<img src='obrazek.png' width=100 height=100>
</div>CSS
img {display: block;}
.prekryti {position: relative;}
.prekryti span {background: url(prekryt.png); width: 100px; height: 100px; position: absolute}
Ukázka
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.