| Autor | Zpráva | ||
|---|---|---|---|
| marvays Profil |
#1 · Zasláno: 1. 11. 2018, 13:26:55
Přeji dobrý den.
Snažím se nastylovat obrázek, který bude sloužit jako výplň divu. Potřebuji vytvořit css obrázku, který vyplní kompletně celý div o velikosti 255px na 255px stím, že chci dosáhnout toho, že daný obrázek se bude podle potřeby zmenšovat a posouvat na souřadnice tak, aby daný div vyplnil bezezbytku a zbytek co přeteče nebude zobrazen. Přiznám se, že jsem do toho šel jako s jednoduchou záležitostí, ale po hodině usilovného zkoušení jsem se do toho celkem zamotal a už nevím, kde mi hlava stojí. poradí mi někdo? Bude to sloužit jako součást stránek, kde nejsem schopen zajistit to, aby obrázky byly nahrávány ve čtvercovém formátu. A nechci tam mít po bocích bílá místa. Celé to chci připravit, že si kod poradí s obrázkem na výšku i na šířku. Nemáte někdo ze zkušených už něco hotového? Moc by mi to pomohlo. |
||
| T-fon Profil |
#2 · Zasláno: 1. 11. 2018, 14:19:55
Asi hledáš cover, ne?
|
||
| marvays Profil |
Ten obrázek nemám jako pozadí. Ten obrázek v tom divu leží.
Začal jsem s tímto: Ale evidentně tam něco chybí :) HTML <div class="rollOverWrapper"> <img src="/images/product/102796.jpg" alt="produkt" class="BrowseProductImage>" </div> CSS .rollOverWrapper {
width: 255px;
height: 255px;
overflow: hidden;
}
img.BrowseProductImage {
min-width: 255px;
min-height: 255px;
text-align: center;
margin: 0 auto;
} |
||
| Kcko Profil |
#4 · Zasláno: 1. 11. 2018, 15:19:27
marvays:
A je problém to tak udělat? Tj. dá t ho jako pozadí a nastavit mu background-size: cover?
Eventuelně můžeš použít object-fit: cover ale tam je o dost horší podpora.
|
||
| marvays Profil |
#5 · Zasláno: 1. 11. 2018, 15:23:11
Kcko:
„A je problém to tak udělat? Tj. dá t ho jako pozadí a nastavit mu background-size: cover?“
To bych musel zasahovat do kodu. A to není moje hřiště :) Navíc by to nemuselo být kompatibilní s následnými aktualizacemi systému. Ale určitě je to taky možnost. |
||
| T-fon Profil |
#6 · Zasláno: 1. 11. 2018, 15:31:36
Btw. proč vlastně když ty obrázky mají furt stejnou velkost, tak se rovnou neukládají v téhle velikosti? A máš po starostech....
|
||
| marvays Profil |
#7 · Zasláno: 1. 11. 2018, 16:09:14
Asi nerozumím, jak to myslíš. Obrázky na vstupu mají různou velikost a různý poměr stran. to bohužel nezměním. umím změnit velikost, ale poměr stran ne.
|
||
| T-fon Profil |
#8 · Zasláno: 1. 11. 2018, 16:19:46
Vstupní obrázek vezmeš, pomocí nějaký knihovny ho ořízneš/zvětšíš/zmenšíš/... na výslednou velikost 255x255 při zachování poměru stran.
|
||
|
Časová prodleva: 3 dny
|
|||
| Tomáš123 Profil |
#9 · Zasláno: 4. 11. 2018, 16:27:39
marvays:
Riešili sme pred časom rovnaký problém. Jednalo sa o galériu fotiek, ktorá je ale prívetivejšia pre vyhľadávače s HTML obrázkom ako jednoduchší ekvivalent v CSS. Po nahratí obrázku zo strany užívateľa sa zmeria pomer medzi výškou a šírkou (v PHP na to sú funkcie). V tvojom prípade budeš rozlišovať či je pomer (povedzme) šírky ku výške väčší alebo menší ako 1 a priraďovať podľa toho nejakému prvku nadradenému obrázku nejakú triedu. Ak je pomer práve 1, užívateľ nahral štvorec a v prípade správnej implementácie je jedno, či a ktorú z dvojice tried priradíš. Nepriradiť žiadnu a vyhnúť sa 2D transformáciám ak má obrázok správny pomer stojí za zváženie, viď podporu nižšie. Ukážka riešenia: Živá ukázka Pre funkčnosť je treba, aby prehliadač podporoval 2D transformácie (IE9+). |
||
|
Časová prodleva: 5 let
|
|||
0