Autor Zpráva
David1256
Profil
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
a nemůžete prostě nastavit obrázku šířku? napřiklad
<img src=".." width="300">
nebo všem obrázkům které se nevejdou do okna dát stejný styl. Možná vam i pomůže css vlastnost
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
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">

CSS

img.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
Díky. Nakonec jsem použil toto.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: