Autor Zpráva
Hologos
Profil
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
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
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
Hologos:
zatajuješ podstatné informace. Jak vypadá ten obrázek na výšku? Je centrovaný? Máš někde odkaz, nechce se mi přemýšlet na prázdno, je už večer :-)

Už nezatajuješ. Ale stejně, máš někde odkaz, jak to vypadá?
Hologos
Profil
Zde to je.
panther
Profil
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
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
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
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
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
panther:
Nj, pravda... Demence... :D
DarkMeni
Profil
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 *
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
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
Nastavil sem max-width i spanu s display: inline-block a už to funguje, díky!

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: