Diskusia – 4. diel - Bootstrap - Obrázky

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

ahojecky.p

Člen

ahojecky.p:29.1.2018 19:48

Ahoj,
tak si říkám, proč mi toto nefunguje ve Firefoxu:

 <picture>
        <source srcset="logo.svg" type="image/svg+xml" />
        <img src="logo.png" class="img-fluid img-thumbnail" alt="ITnetwork logo" />
</picture>

U loga měním "logo.png" za "logo.jpg" atd. a stačilo odmazat:

<source srcset="logo.svg" type="image/svg+xml" />

a funguje to :-) . Chápal jsem, že Firefox tento příkaz "preskočí" a nebude si ho všímat.

Funguje to s tím někomu, nebo dělám něco špatně? :-) Díky

Odpovedať

29.1.2018 19:48

Jan Jurníček

Člen

Jan Jurníček:7.11.2018 20:46

Tag <picture> se používá pro responzivní obrázky. Tedy pro takové obrázky, které se přizpůsobují vlastnostem média. Přesněji, zdroj pro stažení a zobrazení obrázku se vybírá z několika verzí podle vlastností média.

Má obsahovat posloupnost tagů <source> a nakonec jeden element <image>. Každý z elementů <source> má mít atribut media s dotazem na médium a v atributu <srcset> odkaz na obrázek.

A funguje to takto:

U prohlížečů, které znají element <picture> jsou postupně procházeny obsažené elementy <source> a je testován dotaz na médium. Pokud dotaz na médium projde, je stažen a zobrazen obrázek a dál se nepokračuje. Natáhne a zobrazí se tedy obrázek v prvním elementu, kde projde test na médium. Pokud neprojde žádný test média, tak se natáhne a zobrazí zdroj elementu <img>, který je nakonec. Když tam nemáš dotaz na médium a máš verzi Firefoxu, která umí <picture>, tak to u všech médií se logicky stáhne a zobrazí to, co je uvedeno v <source> a k elementu <img> se nepokračuje.
U prohlížečů, které neznají tag <picture> jsou neznámé tagy <picture> a <source> ignorovány a realizuje se tag <img>.

Odpovedať

7.11.2018 20:46

Jan Jurníček

Člen

Jan Jurníček:8.11.2018 11:29

Jo, ještě jsi nenapsal, jak to funguje, když v elementu <source> nahradíš obrázek svg obrázkem jpg, png, nebo gif. Možná je problém ve formátu obrázku. Element <picture> neslouží (v produkční verzi) k testování, co funguje (v tom smyslu, že když prohlížeč neumí svg, tak se jede dál), ale k dotazu vlastností média (dotazem v atributu <media> a výběru vhodného zdroje obrázku pro médium s danými vlastnostmi.

Odpovedať

8.11.2018 11:29

Jan Jurníček

Člen

Jan Jurníček:8.11.2018 11:56

Oprava: v atributu srcset.

Odpovedať

8.11.2018 11:56

Jakub Podskalský

Člen

Jakub Podskalský:12.7.2019 1:52

Opravdu pěkný článek.
Nemám co vytknout, snad jen že ve druhém hintu je překlep, slovo nelézt místo nalézt.
A taky moc nechápu význam tagu picture, když není v source definován atribut media. Snad jen že kdyby nebyl v extrémních případech ten jeden dostupný stáhnout, tak se načte ten další. K tomu to ale neslouží, jak říkal Honza nade mnou a pokud dobře vím. Když tak můžete někdo zkusit vysvětlit, jestli se mýlím.

Odpovedať

12.7.2019 1:52

Jakub Mazuch

Člen

Jakub Mazuch:22.4.2021 20:31

[Margin utility]
Aby fungovalo zarovnávání pomocí mx-auto je zapotřebí elementu img vložit display: block.

Odpovedať

22.4.2021 20:31

... Nejkrásnější je pak pocit dobře a šikovně odvedené práce, navíc s vědomím samostatné práce

Max Snítil

Tvůrce

Max Snítil:7.11.2021 11:02

Super, akorát mi tu chybí, kód, na kterém by bylo vidět, jak se tyto třídy zapisují.

Odpovedať

7.11.2021 11:02

Tadeáš Ocelka

Člen

Tadeáš Ocelka:31.3.2022 21:45

Dobrý den můžu se prosím zeptat, proč mi pořád nejde aplikovat třída border, round atd na kterýkoliv obrázek. - v prohlížeči se nezobrazuje
Používám Chrome.
Děkuji za odpověď.

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <title>.......</title>
    </head>

    <body>
      <div class="container">
        <div>
        <img  src="........." class="rounded-circle" alt="auto" >
        </div>
      </div>
    </body>
</html>

Odpovedať

31.3.2022 21:45

Martin Pakandl

Člen

Martin Pakandl:30.4.2022 11:52

V bootstrap 5 jsou již jinak napsány float atributy:

místo left je start
místo right je end

<div class="clearfix">
    <img  src="/...................png" class="float-start" alt="">
    Tento obrázek je zarovnán zleva pomocí class .float-start
</div>

<div class="clearfix">
    <img  src="/..........................png" class=" float-end" alt="">
    Tento obrázek je zarovnán zprava pomocí class .float-end
</div>

Odpovedať

30.4.2022 11:52

Kamil Pajta

Člen

Kamil Pajta:25.8.2022 15:03

Je to tu všeobecne popísané, ale žiadne príklady a návody, ako by ich bolo možné pre začiatočníka použiť.

Odpovedať

25.8.2022 15:03

Naučíme ťa pracovať na home-office.

Zistiť viac...

Naučíme ťa pracovať na home-office.

Viac info »

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – 4. diel - Bootstrap - Obrázky