Responzivní obrázky
Ahoj,
pomocí stylů jsem si upravil šířku stránky podle rozlišení displeje:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1014px)" href="styl-mobil.css" />
.
.
Ale zasekl jsem se na obrázcích. Našel jsem na internetu řešení pomocí: srcset
ale nedaří se mi to s ním rozchodit.
Věděl by někdo jak udělat ty responzivní obrázky?
Šířku stránky mám 750px.
Děkuji.
Co přesně ti nejde?
Chtěl bych, aby když je stránka širší než 750, aby se zobrazoval na stránce obrázek 740px (big-photo) a když že užší, tak aby se zobrazoval obrázek 400px (small-photo). Ale nedaří se mi to nastavit. Lítá to tam všelijak. Také jsem si všimul, že explorer neroztahuje vůbec, zobrazuje záložní obrázek (src).
Nedaří se mi pochopit tu syntaxi https://www.sitepoint.com/how-to-build-responsive- images-with-srcset/
<img
srcset="small-photo.jpg 400w,
big-photo.jpg 740w"
src="small-photo.jpg"
alt="">
IE srcset nepodporuje, takže budeš nejspíš potřebovat něco takového: picturefill
Díky moc, je to na dobré cestě. :) Pak ještě napíšu jak jsem dopad.
Edit: Tak po základním testování asi ok. :)
Co myslíte, mám používat už místo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html>
což je HTML 5
nebo je to jedno.
Děkuji.
V dnešní době rozhodně HTML5.
Děkuji.