Autor Zpráva
elfi
Profil
Zdravim,

chcel by som sa spytat ci je mozne nejako vlozit obrazok tak, aby sa jeho velkost neprisposobila argumentom height a width, ale aby sa zobrazil len vysek obrazku s danymi rozmermi.

Dakujem
Prochy
Profil
Leda tak, že by si to dělal přes div a přes background to by šlo aspoň myslim.
Přes img nevim
Railbot
Profil
Není to možné. Prochy správně nastínil možné řešení.
joe
Profil
Přes JavaScript to jde určitě, bez něj ne.
margin
Profil *
elfi:
Leda tak, že by si to dělal přes div a přes background to by šlo aspoň myslim.
DIV je blokový, zalamuje řádek, což je sice možné řešit třeba floatem. CSS vlastnost inline-block nemá 100% podporu v prohlížečích, ale jde to obejít.
Nejjednodušší bude použít obrázek na pozadí průhledného 1px GIFu roztaženého HTML atributy "width" a "height na požadovaný rozměr. Dokonce si pak můžeš vybrat, kterou oblast obrázků chceš zobrazovat.

Napadá mě ještě pár krkolomných řešení, uvádím jen nástin bez podrobností:
HTML: obrázek v IFRAME
CSS: overflow, crop

joe:
Přes JavaScript to jde určitě, bez něj ne.
Ani JavaScriptem, ani přes JavaScript to nepůjde.
Railbot
Profil
margin:
Nejjednodušší bude
To skutečně nebude. Spíš je to pěkná prasárna. Ten nejjednodušší způsob nastínil už Prochy. elfimu řešení zbytečně nekomplikuj.

Dokonce si pak můžeš vybrat, kterou oblast obrázků chceš zobrazovat.
Tak to v případě background pochopitelně také.
elfi
Profil
Dik za vsetky odpovede, background krasne fici.
joe
Profil
elfi:
Máš minimálně tyto tři možnosti jak to udělat:

1. Přes CSS - background a pozicované pozadí (napsal Prochy)

2. Přes JavaScript, jak jsem napsal já a margin nesmyslně a bezdůvodně vyvrátil, ale bylo by to složitější.

3. Asi nejlepší a nejpoužitelnější způsob ze zde uvedených je takový:

<div style="position:relative; width:149px; height:245px;"> <!-- tady je uvedená šířka a výška obrázku, stejně jako níže -->
<img src="example.jpg" width="149" height="245" alt="" >
<div style="position: absolute; left: 0; top: 0; border-left: 20px solid white; border-right: 5px solid white; width: 124px; border-top: 25px solid white; border-bottom: 15px solid white; height: 205px;"></div> <!-- tady to je třeba počítat ( sirka 124px = 149 - 20 - 5 ) -->
</div>


EDIT: opraveno, možná to jde udělat i nějak komplexněji bez nutnosti počítání.

Problém je, že to půjde jen tam, kde je jako pozadí barva.

margin:
Vím co píšu, nemusíš mě opravovat. A když píšu, že to jde přes JavaScript, tak tím myslím, že to přes JavaScript opravdu půjde. Máš nějaký důvod, aby to nešlo?
margin
Profil *
joe:
JavaScript (zpravidla) neumí nic, co by neumělo HTML/CSS. (Nepočítám-li <canvas>, který by vlastně v tomto případě mohl pomoct, ale také jen ve zlomku prohlížečů.)
Zdroj: Chamurappi: http://diskuse.jakpsatweb.cz/?action=vthread&forum=4&topic=106004#5

Máš nějaký důvod, aby to nešlo?
Jak se jmenuje JS metoda pro manipulaci s obrázkem? Nebo znáš jiný způsob?
Str4wberry
Profil
Ale tvoje řešení (uvedené jako nejlepší), joe, dělá něco jiného. V podstatě jen zakryje určitou část obrázku, cílem ale je vložit jen tu jeho chtěnou část. Co se týče JS, tak ten by se dal použít maximálně tak k nahrazení toho <img> obrázkovým <div>em.
joe
Profil
Str4wberry:
Ale tvoje řešení (uvedené jako nejlepší), joe, dělá něco jiného
Moje řešení dělá přesně to, co je potřeba - viz požadavek od elfiho:
ale aby sa zobrazil len vysek obrazku s danymi rozmermi.

Navíc cropnutí obrázku ne vždy znamená změnit ho na trvalo. Jde jen o možnost, jak zobrazit část z obrázku a přitom ho nezničit.

Cílem je zobrazit část obrázku návštěvníkovi a to možné je (jak jsem uvedl příklad).
Možný HTML kód pro následnou úpravu JS by mohl vypadat následovně:

<img src="example.jpg" width="100" height="100" class="crop-5-10-5-10">



margin:
Asi jsi moc nepochopil smysl toho, co Chamurappi myslel, v JavaScriptu sice neexistuje přímo metoda na oříznutí obrázku, to ale neznamená, že si ji nemůžu sám dotvořit a nějak napodobit. Nebo ty snad používáš jen to, co existuje a už někdo vymyslel? Nemáš svůj vlastní nápad jak problém řešit?
margin
Profil *
Možný HTML kód pro následnou úpravu JS by mohl vypadat následovně:
<img src="example.jpg" width="100" height="100" class="crop-5-10-5-10">
Takže nakonec z toho vyleze nastavení stylu skriptem. Nebo to bude opravdu něco, co bez JS nejde?
joe
Profil
margin:
Proč se pořád chytáš toho, co jsem napsal? I to co je v odpovědi #3 platí, záleží na pohodlnosti, jak by to chtěl kdo udělat, někdo si to třeba spočítá, jiný na to využije skript, který to udělá za něj a obalí to do divů jak je potřeba... nechápu co se ti na tom pořád nelíbí.

To samé bych mohl citovat já, například:

Ani JavaScriptem, ani přes JavaScript to nepůjde.

Tady vidíš, že to jde jak s JS, tak bez něj. Při psaní odpovědi #3 jsem uvažoval komplexní řešení a narozdíl od tvého řešení je mé řešení použitelné a tak, jakby mělo být, i přes to, že ve skutečnosti se načítá víc než jen zobrazovaná oblast.
Chamurappi
Profil
Reaguji na joa:
v JavaScriptu sice neexistuje přímo metoda na oříznutí obrázku, to ale neznamená, že si ji nemůžu sám dotvořit a nějak napodobit
Můžeš nanejvýš změnit CSS nebo HTML. JavaScript ořezávat neumí (nepočítám-li <canvas>). Kolega margin mě pochopil správně, v příspěvku [#4] jsi podpořil častou scestnou představu, že JS dokáže s grafikou nějaké (statické) zázraky, které jsou bez něj nemožné.


Reaguji na margina:
CSS: overflow, crop
Spíše clip.
Str4wberry
Profil
joe: „Moje řešení dělá přesně to, co je potřeba - viz požadavek od elfiho:

Ale ten obrázek bude na stránce zabírat původní místo, jen nebude celý vidět, nepletu-li se, což nemusí být žádoucí.
joe
Profil
Str4wberry:
Teď ano, ale dá se to změnit nastavením display na inline-block a overflow na hidden. Případně jinak nastylovat. A rozhodně je to spolehlivější řešení

Chamurappi:
Na začátek bych upřesnil, že JavaScript samozřejmě dokáže víc než pouhé HTML (http://diskuse.jakpsatweb.cz/?action=vthread&forum=4&topic=106004#5), zřejmě jsi to myslel v kontextu, ale aby si to někdo nevysvětloval jinak), tak jednoduché vyvrácení - dokáže HTML pracovat s cookies? Jde v HTML zjišťovat adresu z adresního řádku? Nebo například můžeš vyhazovat chybové hlášení? (spíše otázky pro margina)

A teď k tomu, co jsi napsal v [#14]
Uvedl jsem příklad, který ti ořeže obrázek v HTML a ty napíšeš, že JavaScript ořezávat neumí :-) Samozřejmě, že neexistuje nic jako crop('example.jpg', 10,10,10,10);, však to ale neznamená, že nemůžu obrázek zakrýt divama a zobrazit jen tu část, kterou chci (například). Což je v podstatě také ořez. (Návštěvníkovi je jedno, jestli načtu celý obrázek, ten ořežu způsobem, o kterým tady píšu a nebo mu rovnou předhodím skutečně oříznutý obrázek. V obou případech může dostat stejný výsledek)

Teď jsem si všíml, že ve svém příspěvku ([#13]) jsem se odkazoval na [#3], správně má být [#4], kterou jsem uvažoval komplexní řešení nad všemi obrázky v dokumentu.

A jak jsem psal, oříznutí obrázku nemusí vždy znamenat jeho destrukci (skutečný ořez), ale jen zobrazení uživateli. Navíc pouhé zobrazení části z obrázku na stránce může mít i své výhody, než načtení skutečně oříznutého obrázku.
Chamurappi
Profil
Reaguji na joa:
zřejmě jsi to myslel v kontextu,
V kontextu statických vizuálních efektů.

dokáže HTML pracovat s cookies?
Cookies jsou zase stoprocentně v režii HTTP protokolu, JS s nimi nedokáže udělat nic, co by neumělo HTTP.

však to ale neznamená, že nemůžu obrázek zakrýt divama a zobrazit jen tu část, kterou chci (například)
JS umí pracovat s těmi <div>y, ale neumí ořezávat (nepočítám-li <canvas>). Když by se někdo zeptal, jak udělat červený nadpis, odpověděl bys mu také, že to umí JavaScript? Do čehokoliv jde zamíchat JS, záleží na tom, zda je v postupu klíčovou (a nezbytnou) přísadou.

Uvedl jsem příklad, který ti ořeže obrázek v HTML a ty napíšeš […]
HTML také neumí ořezávat.

pouhé zobrazení části z obrázku na stránce může mít i své výhody
Může mít, nicméně to nemá žádný dopad na schopnosti jazyka.
joe
Profil
Chamurappi:
Ale... ořezávat umí i CSS - overflow je svým způsobem ořez a je možné ho na to použít. Tzn. že přidávám další metodu, jak oříznout obrázek :-)

Cookies jsou zase stoprocentně v režii HTTP protokolu, JS s nimi nedokáže udělat nic, co by neumělo HTTP.
To je jedno, podstatné je, že JS dokáže víc než jen HTML, což jsem tím vyvrátil.
Chamurappi
Profil
Reaguji na joa:
Zásah do cookies je interaktivní změna, nikoliv statický vizuální efekt (o čemž je řeč tady i ve vlákně, z něhož citace pochází). Vyvrátil jsi větu vytrženou z obou kontextů. Nevím, jestli tohle je opravdu podstatné…

přidávám další metodu, jak oříznout obrázek
Ta už tu byla zmíněna.
joe
Profil
Chamurappi:
Ta už tu byla zmíněna.
<del>A přesto jsi psal, že to nejde. No vidíš to.</del> Jinak myslím, že autor svou odpověď dostal, a přes to, že oba máme jiné názory, ukončeme to... nikam to nevede.
Chamurappi
Profil
Reaguji na joe:
A přesto jsi psal, že to nejde. No vidíš to.
Nevidím :-)
Kde jsem to psal?
joe
Profil
Pravda, nepsal :-) upraveno. Promiň.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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