Autor Zpráva
hobr
Profil
Zdravím, potřebuju dát obrázky do stránky tak, aby se vždy roztáhly přes celou šířku v určitém rozmezí a nevytvářely mezeru při jakémkoli rozlišení. Navíc bych potřeboval, aby se při najetí myši natáhl zčásti průhledný překryvný obrázek a textový popis s odkazem. Něco jako je tady: www.vernyzustanu.cz/rozhovory

Stačil by mi odkaz na nějaký tutoriál nebo plugin do Wordpressu či jquery, ale nevím, jak se tomu říká a jak to hledat.

Díky moc.
peta
Profil
<img width="100%">
<img style="width:100%;">
To roztahne do sirky obklopujiciho divu (Za predpokladu, ze to u obrazku nefunguje jinak).
A kdyz divu nenastavis sirku, tak se roztahne podle sirky obrazovky.
A kdyz obrazku nastavis jen jeden rozmer, tak druhy se dopocita.
Bubák
Profil
peta:
To roztahne do sirky obklopujiciho divu (Za predpokladu, ze to u obrazku nefunguje jinak).
Funguje to stejně, procentní šířka vztahuje k šířce nadřazeného elementu.
hobr
Profil
Omlouvám se, špatně jsem to napsal. Nastavit obrázku width 100% umím. Myslel jsem, že se podíváte na ten odkaz... Zkusím to tedy napsat ještě jednou, podrobněji.

Mám třeba deset obrázků, které chci dát na stránku tak, aby vždy zaplnily celou šířku stránky. Při nejužším okně jsou obrázky pod sebou v jednom sloupci. Když okno pomalu rozšiřujete, obrázek se zvětší až do momentu, kdy se vejdou dva vedle sebe. Pak mám tedy dva sloupce, fotky opět vyplňují celou šířku a jak okno rozšiřuju, tak se fotky zvětšují do momentu, kdy se vejdou tři vedle sebe. Atakdál.

Zkrátka, podívejte se na ten web a zkuste si pohybovat se šířkou okna, abyste viděli to chování na vlastní oči, což asi bude nejlepší ;)
peta
Profil
JavaScript -- příklady » Práce s okny prohlížeče
JavaScript -- příklady » Využití událostí
Události JavaScriptu
Zkusil bych neco jako window.onresize = x(320) a tam napises js funkci, ktera to bude prepocitavat. Otazkou je, zda ma prepocitat vsechny obrazky v divu nebo jen prvni radek.
Mohlo by to vypadat nejak takto, pokud tam nemam chybu. Ostatni zaridi css float.
<script>
function x(size)
{
var i,div,img,w,m,n;
div = document.getElementById('d');
img = div ? div.getElemenstByTagName('IMG') : null;
w = div ? div.offsetWidth : 0; // sirka divu, mozna se jmenuje jinak nez offsetWidth
w = w<size ? size : w;
m = math.floor(w / size); // pocet obrazku, ktere se vejdou na sirku
n = math.floor((w % size)) / m; // zbytek po deleni deleny poctem obrazku na sirku
w = w + n;
for (i=0;i<img.length;i++) {img[0].width = w;} // mozna style.width a px
}
</script>
hobr
Profil
Díky všem za reakce, nakonec jsem našel přijatelné řešení :)

Vaše odpověď

Mohlo by se hodit

  • Pokud přikládáte obrázkové ukázky, dbejte prosím na jejich přijatelnou (datovou) velikost.
  • Uvádějte v titulku grafický program, na který se ptáte.

Prosím používejte diakritiku a interpunkci.

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