| Autor | Zpráva | ||
|---|---|---|---|
| David1256 Profil |
#1 · Zasláno: 5. 8. 2013, 14:46:45
Dobrý den,
řeším teď responzivitu na webu. Sekl jsem se ale na jednom problému. Jde o to, že mám na stránce několik různě velkých obrázků a chtěl bych je nějak nastylovat, aby když už se nevejdou do okna, tak se zmenšily, ale aby se zmenšily jen ty, co se tam nevejdou a né i ty malé, co se tam vejdou. Dávat každému obrázku sólo css je nemyslitelné, protože se tam budou pak přes administraci moct dávat jakékoliv rozměry. Vím, že existují skripty na responzivní galerie, ale to mi nepomůže, protože ty obrázky nejsou vysloveně galerie, ale jsou součástí článku na různých místech dokumentu. Nevíte někdo, jak toto vyřešit? Děkuji. |
||
| Helmy Profil |
#2 · Zasláno: 5. 8. 2013, 16:01:07 · Upravil/a: Helmy
a nemůžete prostě nastavit obrázku šířku? napřiklad
<img src=".." width="300"> background-size: 400px; No špatně jsem si to přečtl, vy potřebujete, aby všechny obrázky měli stejný styl, tak mě napadlo že by pomohla vlastnost max-width::
|
||
| Str4wberry Profil |
#3 · Zasláno: 5. 8. 2013, 17:04:39
Můžete použít předřečníkem navržené využití
img {max-width: 100%}.
I když v případě, že ty obrázky jsou opravdu hodně velké, bych doporučil spíš detekovat mobilní prohlížeč a nabídnout mu i datově menší obrázek. Zmenšovat pomocí max-width třeba FullHD obrázek na 480 px mi přijde značné plýtvání daty.
Další možnost je mít v HTML kódu obrázek ve více rozlišeních a pomocí Media Queries zobrazit jen ten vhodný. HTML<img src="obrazek-maly.jpg" class="mobil"> <img src="obrazek-velky.jpg" class="pocitac"> CSSimg.mobil {display: none}
@media screen and (max-width: 480px) {
img.mobil {display: block}
img.pocitac {display: none}
}A také je možné si vytvořit serverový skript pro zmenšování obrázků a potom JavaScriptem změřit dostupnou plochu stránky a jako cíl obrázku nastavit adresu zmenšovacího skriptu s předanou velikostí — tento skript tak může dodat obrázek v ideální podobě. |
||
| David1256 Profil |
#4 · Zasláno: 5. 8. 2013, 19:45:48
Díky. Nakonec jsem použil toto.
|
||
|
Časová prodleva: 12 let
|
|||
0