11 Obrázky
Zdrojové CSS: /src/css/atoms/_image.scss
Defaultní – 16:9
Defaultní – 4:3
Stejná pravidla jako u Defaultního 16:9 jen se na atom .image přidává modifikátor image--4by3.
Popis obrázku
K obrázkům lze vkládat popisky. Slouží pro ně element .image__caption, který se defaultně zobrazuje pod obrázkem. Přidáním modifikátoru image__caption--inside se popisek bude zobrazovat ve spodní části obrázku.
V našem případě jsme pro pěkné naformátování umístili obrázky do atomu gridu.
Popis obrázku donec laoreet tellus et eros pharetra vehicula.
Copyright 2016, John Doe
Obrázky na plnou šířku
Na defaultní atom .image se přidá modifikátor image--full, který omezí výšku holderu na max 600px, aby nebyly obrázky příliš velké na širokých obrazovkách (např. při rozlišení 1920px).
Základní pozicování v textu
První tři příklady ukazují, jak udělat obrázek obtékaný textem. Na atom .image se přidá modifikátor image--right. Obdobně by to fungovalo i s modifikátorem image--left. Navíc je přidána classa z gridu, která definuje šířku obrázků v containeru.
Čtvrtý příklad je ukázka obrázku na plnou šířku obsahu. Jedná se vlastně o defaultní atom obrázku.
Další dvě ukázky jsou obtékané obrázky s vysunutím z obsahu. Opět se na vysunutí a velikost používají classy z gridu. Pro tento příklad byl celý obsah vložen do gridu, který je po stranách odsazený.
Dalším příklad je standardní atom obrázku použitý v polovičním gridu.
Je možné libovolně kombinovat formáty 16:9 s 4:3 i včetně popisků.
Etiam at urna sollicitudin, suscipit libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa.
Etiam at urna sollicitudin, suscipit libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa. Nunc eget dui diam. Aliquam a facilisis tortor.
Etiam at urna sollicitudin, suscipit libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa. Nunc eget dui diam.
Etiam at urna sollicitudin, suscipit libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa.
Etiam at urna sollicitudin, suscipit libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa.
Etiam at urna sollicitudin, suscipit libero at, lobortis tellus. Pellentesque sodales, dui ac consectetur consequat, nisi mi feugiat urna, in vestibulum velit urna in justo. Aliquam a facilisis tortor. Aliquam condimentum odio sollicitudin tellus fermentum placerat. Sed euismod velit ac mauris pretium ondimentum. Duis non rhoncus odio, a varius orci. Nullam fermentum leo at quam rutrum blandit. Fusce varius eros sit amet nibh convallis, ac vehicula leo rutrum. Curabitur sed sollicitudin massa.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, repellendus. Dignissimos qui, tempora quas accusamus dolore itaque sint similique, amet dolorem, obcaecati inventore, optio sunt sit molestias vitae quasi. Eius!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque obcaecati doloribus rerum quidem, sed ad at tempore consequuntur quaerat ex. Odio quasi dolores magnam minus. Possimus sit, aliquam ipsum recusandae!
Obrázky pro wysiwyg
V některých případech nelze jednoduše vkládat obalující elementy pro obrázky. Např. v tzv. wysiwyg editorech, které dokáží maximálně vložit classu na obrázek. Proto po přidání classy .right nebo .left na obrázek se začnou obtékat textem (pomocí css pravidel float:left/right;).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, laudantium, error! Quis voluptatibus delectus laborum doloremque, nisi. Eaque sit expedita deleniti quibusdam dolorem molestiae nulla quas minima incidunt, nesciunt distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, laudantium, error! Quis voluptatibus delectus laborum doloremque, nisi. Eaque sit expedita deleniti quibusdam dolorem molestiae nulla quas minima incidunt, nesciunt distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, laudantium, error! Quis voluptatibus delectus laborum doloremque, nisi. Eaque sit expedita deleniti quibusdam dolorem molestiae nulla quas minima incidunt, nesciunt distinctio?
Příklad použití srcset a sizes atributů
Jako dokumentaci doporučuji využít český článek na blogu Vzhůrudolů.
Jsme univerzita na celý život
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut, suscipit quos quo, voluptates optio error explicabo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut, suscipit quos quo, voluptates optio error explicabo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut, suscipit quos quo, voluptates optio error explicabo!
Jsme univerzita na celý život
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut, suscipit quos quo, voluptates optio error explicabo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut, suscipit quos quo, voluptates optio error explicabo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ut, suscipit quos quo, voluptates optio error explicabo!
Pro zobrazení obrázků slouží atom .image, který drží pomocí image__holder:after container 16:9. Na výšku menší obrázky než container se vertikálně vycentrují – obdobně na šířku menší obrázky se horizontálně vycentrují. Větší obrázky se zmenší dle proporcí do containeru.