Diskuze – Lekce 4 - Bootstrap - Obrázky

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

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

Odpovědět

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>.

Odpovědět

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.

Odpovědět

8.11.2018 11:29

Jan Jurníček

Člen

Jan Jurníček:8.11.2018 11:56

Oprava: v atributu srcset.

Odpovědět

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.

Odpovědět

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.

Odpovědět

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í.

Odpovědět

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>

Odpovědět

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>

Odpovědět

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ť.

Odpovědět

25.8.2022 15:03

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 25.

Nejčastěji vyhledáváné

Diskuze – Lekce 4 - Bootstrap - Obrázky