| Autor | Zpráva | ||
|---|---|---|---|
| Hologos Profil |
#1 · Zasláno: 13. 9. 2010, 22:39:01
Zdravím,
narazil jsem na takový problém. Potřebuji, aby načtený obrázek měl okolo sebe černé pozadí + ohraničení. To by nebyl takový problém. Ale v tom ohraničení potřebuji mít ještě text. Cílem je, aby fotka měla jakoby paspartu. Mám v php nastaveno, jaké maximální může mít obrázek rozměry. Pokud je větší, zobrazí se maximálně max v 800x600. V tuto chvíli problém není. Jakmile je ale obrázek orientován na výšku, černé pozadí je však furt těch 800px (798px když odečtu ten border). Tedy - můj cíl je dosáhnout toho, aby se ta pasparta natahovala podle obrázku. Teď to obcházím tam, že si z php zjistím rozměry, jaké obrázek bude mít a přes inline styl to nastavuji. Chtěl jsem se však zeptat, jestli neexistuje lepší řešení. Díky. |
||
| panther Profil |
#2 · Zasláno: 13. 9. 2010, 22:41:55
Hologos:
co kdybys jednoduše rozměr nenastavoval, bude takový, jaký bude obrázek (ale nevím, jestli jsem tě dobře pochopil). |
||
| Hologos Profil |
#3 · Zasláno: 13. 9. 2010, 22:46:05 · Upravil/a: Hologos
Struktura vypadá takto:
HTML <div id="pasparta"> <img ... /> <div id="nazev_fotky">Popis fotky..</div> </div> CSS
#pasparta
{
margin: 0 auto;
padding: 24px 24px 0 24px;
border: 1px solid #323232;
background-color: #000000;
}
#nazev_fotky
{
height: 60px;
line-height: 60px;
font-size: 20px;
}
Když nenastavím rozměr, tak se automaticky použije hodnota auto - v mém případě 800px. Když nastavím ty vlastnosti #pasparta tomu <img /> tagu, tak to funguje tak, jak by mělo, jen ta pasparta není okolo toho názvu.. Proto to musí bát takto. |
||
| panther Profil |
#4 · Zasláno: 13. 9. 2010, 22:51:29 · Upravil/a: panther
Hologos:
Už nezatajuješ. Ale stejně, máš někde odkaz, jak to vypadá? |
||
| Hologos Profil |
#5 · Zasláno: 13. 9. 2010, 22:59:56
|
||
| panther Profil |
#6 · Zasláno: 13. 9. 2010, 23:04:13
Hologos:
možná jsem nechápavý, ale trochu mi uniká, co chceš udělat. Při obrázku na výšku má být ten černý div užší (široký jako obrázek), nebo jak? Nějak se mi zdá, že by se tam nemusel vejít ten popisek. |
||
| Hologos Profil |
#7 · Zasláno: 13. 9. 2010, 23:07:43 · Upravil/a: Hologos
panther:
„Při obrázku na výšku má být ten černý div užší (široký jako obrázek), nebo jak?“ Ano, to je přesně ono. Problém je v tom, jak to tomu divu s id #pasparta říct jinak než inline stylem. On se do tý pasparty pokaždé načítá jiný obrázek s jinými rozměry - hledám universální řešení. |
||
| Marek88 Profil |
#8 · Zasláno: 13. 9. 2010, 23:17:59 · Upravil/a: Marek88
No když tomu obalovému divu (paspartě) nenastavíš pevnou šířku, tak se přece roztáhne podle obsahu - tedy podle obrázku. Nebo ne...?
edit: [#3] Hologos: "Když nenastavím rozměr, tak se automaticky použije hodnota auto - v mém případě 800px." Proč takhle? Když tomu nebudeš dávat těch 800px, tak se to roztáhne samo a je to... |
||
| panther Profil |
#9 · Zasláno: 13. 9. 2010, 23:38:08 · Upravil/a: panther
Hologos:
„No když tomu obalovému divu (paspartě) nenastavíš pevnou šířku, tak se přece roztáhne podle obsahu“ ne, to platí pro výšku, nikoliv pro šířku. Tu má div jakožto blok 100% rodiče. Toto mě zmátlo, něco podobného jsem psal v [#2], je to blbost. Hologos: pokusil jsem se vytvořit funkční ukázku toho, jak jsem to (snad správně) pochopil. Mohlo by to tak být? |
||
| Hologos Profil |
#10 · Zasláno: 13. 9. 2010, 23:56:32
To je přesně ono. Tohle řešení jsem ještě nikdy neviděl. Zítra zaexperimentuji. Zdá se, že to bude díky pozicování.
Děkuji. |
||
| Marek88 Profil |
#11 · Zasláno: 14. 9. 2010, 00:06:40
panther:
Nj, pravda... Demence... :D |
||
|
Časová prodleva: 3 roky
|
|||
| DarkMeni Profil |
#12 · Zasláno: 16. 12. 2013, 22:50:15
Zdravim, pokoušim se přijít na něco podobnýho, akorát se už nemůžu dostat k ukázce abych se podíval jak to bylo vyřešený
Na stránce mám obrázek, který má nastavenou max-width a max-height na 95% a potom ještě width a height na auto aby byl zachován poměr stran V případě, že má obrázek větší šířku než 95% velikosti okna, tak to funguje jak má, ale když tam dám obrázek s poměrem třeba 2:3, tak se obrázek přerozměruje jak má, ale obalovací div zůstane se 100% šířkou Je možný ten div nějak přesvěčit o tom, aby se přispůsobil obrázku a zároveň se vycentroval? (někde sem čet, že když mu nastavim float, tak se přispůsobí šířce obsahu, ale pak se zase nenechá vycentrovat, nebo spíš nevim jak na to) |
||
| margin Profil * |
#13 · Zasláno: 17. 12. 2013, 00:50:04
DarkMeni:
„potom ještě width a height na auto aby byl zachován poměr stran“ To je zbytečné, auto je výchozí hodnota. „V případě, že má obrázek větší šířku než 95% velikosti okna, tak to funguje jak má, ale když tam dám obrázek s poměrem třeba 2:3, tak se obrázek přerozměruje jak má, ale obalovací div zůstane se 100% šířkou“ Tak to máš deklarované, ale nevím, co chceš, aby se stalo. Nejsnáze (napříč prohlížeči) se obsahu přizpůsobí obalový span (obecně inline element), který má nastavený display: inline-block; a s vycentrováním není problém.
|
||
| DarkMeni Profil |
#14 · Zasláno: 17. 12. 2013, 13:19:26
margin:
„To je zbytečné, auto je výchozí hodnota.“ Aha, díky „Tak to máš deklarované, ale nevím, co chceš, aby se stalo.“ To, co sem pak psal pod tim: „Je možný ten div nějak přesvěčit o tom, aby se přispůsobil obrázku a zároveň se vycentroval?“ Nebo jestli myslíš co aby se stalo s tim obrázkem, tak: Když bude mít větší šířku než je šířka okna, tak aby se zmenšil na šířku okna a zároveň si zachoval poměr stran (takže chci, aby se do okna vešel celej - nechci aby se tam objevil horizontální posuvník - ten vertikální mi nevadí) Když sem tam dal span s display: inline-block, tak přestalo fungovat zmenšení na šířku okna - prostě když sem tam dal obrázek 1600x1200 tak se vykreslil v originální velikosti (okno sem měl s šířkou asi tak 1024px), takže se nezmenšil - jako kdyby ignoroval max-width a max-height |
||
| DarkMeni Profil |
#15 · Zasláno: 18. 12. 2013, 17:20:24
Nastavil sem max-width i spanu s display: inline-block a už to funguje, díky!
|
||
|
Časová prodleva: 10 let
|
|||
0