Responsivní (adaptivní) obrázky v CSS
Dá se to udělat takto:
<img src="http://lorempixel.com/800/200/sports/1/"
class="visible-lg"
style="display:none">
<img src="http://lorempixel.com/400/200/sports/1/"
class="visible-md"
style="display:none">
<img src="http://lorempixel.com/200/200/sports/1/"
class="visible-sm"
style="display:none">Když nemáte Bootstrap, potřebujete ještě něco jako:
<style>
@media screen and (min-width: 1000px) {
.visible-lg {display: block !important;}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
.visible-md {display: block !important;}
}
@media screen and (max-width: 499px) {
.visible-sm {display: block !important;}
}
</style>Zdá se, že se tím (jak dělat adaptivní obrázky v HTML/CSS) zabývá
dost chytrých lidí , ale zatím asi nerozumím, co je na řešení výše
suboptimálního.
Proč to není dobré řešení
Takto přímočaře to bohužel nejde – prohlížeče (aktuální FF a
Chrome) si potichu stáhnou všechny obrázky, i když mají
display:none. (Díky za popostrčení Martinu Michálkovi.)
Komentáře (13)
k formuláři
RSS kanál komentářů
27.1. 2014 — 15:44
Suboptimální na tvém řešení je především to, že se sice zobrazí správný obrázek, ale prohlížeče stáhnou všechny tři.
display:nonejim v tom nezabrání.27.1. 2014 — 16:09
[1] Martin Michálek: Děkuji, jsem si zase jednou něco domyslel, než abych to vyzkoušel. :-)
27.1. 2014 — 16:21
Netrap se tím.
display:nonefází prošli úplně všichni co s RWD mají něco společného. ;)27.1. 2014 — 16:33
[3] Martin Michálek: Dřív jsem zkoušel jestli prohlížeče načítají obrázky linkované (jako background-image) v neaplikovaných media-queries a vyšlo mi že vesměs ne (tak jak bych očekával a potřeboval).
Proto mě překvapuje, že
display:nonena prvku (nebo jeho předkovi) načteníimgnezabrání. Přijde mi to na pičáka. :(27.1. 2014 — 17:08
Na svým portfoliu – http://www.flor.cz/portfolio/ – řeším responsivitu obrázků přepočítáváním přes javascript (jen při načtení stránky a změně orientace displeje). Dnešní prohlíčeče umí downsamplovat obrázky docela pěkně a kdyžtak je tam možnost zobrazení 1:1.
27.1. 2014 — 20:44
[2] Kahi: Petere, jak píše Martin, takhle jsme to zkoušeli všichni :)
Problém je, že i kdyby to fungovalo, jak sis představoval, tak to řeší pouze některé problémy. Např. retina zařízení by dostala stejný obrázek jako ne-retina – tedy buď pro ně v nedostačující kvalitě nebo zbytečně velký pro ostatní.
Všech devět (!) případů užití najdeš v poznámce W3C WG.
27.1. 2014 — 21:00
[6] Robin Pokorný: Díky za komentář i odkaz!
To není problém, to je limitace, která se mě většinou netýká. Přijde ti některý nepokrytý use-case fakt zásadní? (Mimochodem retina displej je přece taky rozlišitelný v media-query, ne?)
27.1. 2014 — 21:15
[6] Robin Pokorný: Asi teď nejsem moc srozumitelný. Dejme tomu, že mám primitivní javascriptový skriptík který se postará, aby se naloadoval jen ten img, který projde do aktuální media-query. Jasně, asi se takto nevyřeší obrázek pro tisk. Ale jinak fakt zatím nevidím „problém“, resp. nutnost meditovat nad syntaxí a zapojovat do diskuse drahé konsorcium. Za vyjasnění budu opět velmi vděčen!
28.1. 2014 — 13:59
Resumé:
img srcnení dobré, protože se stáhne navzdorydisplay: none. Jedním řešením je místoimgpoužít jiný prvek sbackground-image. Jiným řešením jeimgoživit až později javascriptem. Demo28.1. 2014 — 15:35
[8] Kahi: Rozumím otázce a chápu, proč se ptáš :)
Ano, jde to. Těch kombinací je ovšem tolik, že vypisovat všechny by bylo velmi, velmi komplikované. Nakonec bys skončil s něčím jako v tomto příkladě
A co až příjdou zařízení s device pixel ratio 4? 6? 20? 0.01? Co když mám odzoomováno, nazoomováno?
Jistě Javascriptem jde většina (tedy pro většinu použití) vyřešit (to je důvod existence polyfilů), přesto to nebude (a nemůže být) plnohodnotné.
Mimochodem, zdá se, že jsem asi senzibil, protože mi něco říká, že vyvyjíš ve Firefoxu…
(Je to to, že v Chrome (Win) tvůj příklad nefunguje :o :D )
28.1. 2014 — 21:57
Ještě vyšší pixel ratio nemá moc smysl, limitem je lidské oko. Spíš se dá očekávat, že brzy bude vše na úrovni retiny a budou se spíš přidávat pravidla pro nízká rozlišení. Bylo by ideální, kdyby s tím návrhy pro responzivní obrázky počítaly.
S tím, jak nás bude méně pálit datový přenos, zmizí potřeba přenášet obrázky ve standardním rozlišení, jelikož nejsou o tolik menší.
28.1. 2014 — 22:15
[10] Robin Pokorný: Rozumím tomu dobře, že tvá hlavní výhrada vůči tomu mému řešení (opravil jsem Chrome) je, že HTML by bylo nepřehledné, pokud bych chtěl pokrýt podstatě více variant? (Když pominu, že přirovnání s odkázaným kódem mi přijde zavádějící.)
Připomínám, že má jediná ambice je mít minimalistické řešení pro dnes řešené use-casy. Hypotetické use-casy rád přenechám k diskusi jiným.
28.1. 2014 — 22:32
Ještě jsem zaznamenal negativum závislosti na JS. Napadá vás, když si odmyslíme historické puristické tendence, proč je to problém?
Přidat komentář