NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
DooM
Tvůrce
Avatar
DooM:13.8.2015 21:42

Zdravím, potřeboval bych zmenšit obrázek do divu, aby si zachoval poměr stran.
Vše funguje jak má, teda až na export.
Exportuji html do PDF přes nějaký konvertor(nemám o něm podrobnější info, je integrovaný v naší firemní aplikaci), ale ještě se mi nepodařilo najít podporovaný způsob. Funkce jako max-width, max-height, object-fit nejsou podporovány a vždy po konverzi mi to celý design kompletně rozhází.
Podporuje to snad jen CSS1.
Nenapadá někoho způsob jak toto vyřešit?
Díky.

Takto vypadá můj kód aktuálně:
Funguje, ale jen pro obrázky ve čtvercovém poměru stran, pokud je obrázek vertikálně delší, tak se stane to, co na obrázku v příloze s mobilem.

<div style="width: 80mm; height: 71mm;">
<img style="width: 100%; height: 100%; object-fit: contain;" src=Obrázek" />
</div>
Odpovědět
13.8.2015 21:42
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na DooM
TomasGlawaty:13.8.2015 23:05

Ahoj,
napadlo mě toto, ale nevím jestli je to co chceš :)

http://jsfiddle.net/2u3rxvsn/

 
Nahoru Odpovědět
13.8.2015 23:05
Avatar
DooM
Tvůrce
Avatar
Odpovídá na TomasGlawaty
DooM:14.8.2015 0:09

Ahoj, bohužel knihovny jsou taky zakázány, musí to být čistě : html/css

Nahoru Odpovědět
14.8.2015 0:09
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
Miroslav 'jimisek' Bahenský:14.8.2015 0:16

Ahoj, co dát do img ještě

background-size: cover;

?

Nahoru Odpovědět
14.8.2015 0:16
"Nevěř ostnatému drátu, byť se stokrát tvářil jako stonek růže" - K. Kryl
Avatar
DooM
Tvůrce
Avatar
Odpovídá na Miroslav 'jimisek' Bahenský
DooM:14.8.2015 0:24

To jsem zkoušel a nefungovalo to podle představ.

Nahoru Odpovědět
14.8.2015 0:24
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
NouF
Člen
Avatar
NouF:14.8.2015 5:15

Co upravit velikost obrázů předem na rozmer který bude vyhovovat?

 
Nahoru Odpovědět
14.8.2015 5:15
Avatar
DooM
Tvůrce
Avatar
Odpovídá na NouF
DooM:14.8.2015 5:33

Obrázky mají rozdílné rozměry a musí se dynamicky změnšovat při zachování poměru stran, aby pasovali do divu.
Čili na tom místě může být obrázek s rozlišením 1024x768, ale i obrázek s rozlišením 1024x2048.

Nahoru Odpovědět
14.8.2015 5:33
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
Matúš Petrofčík:14.8.2015 5:50

a co

background-size: contain;

?

Nahoru Odpovědět
14.8.2015 5:50
obsah kocky = r^2 ... a preto vlak drnká
Avatar
DooM
Tvůrce
Avatar
Odpovídá na Matúš Petrofčík
DooM:14.8.2015 5:53

Stejný výsledek.

Nahoru Odpovědět
14.8.2015 5:53
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
adder
Člen
Avatar
Odpovídá na DooM
adder:14.8.2015 7:53

Divu nastavíš ještě kód

positition: relative;

a obrázku přidáš

position: absolute;
top: 0;
left: 0;

akorát obrázky budou deformovaný, pokud ti nejde max-width a max-heidght..

Nahoru Odpovědět
14.8.2015 7:53
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Odpovídá na DooM
Neaktivní uživatel:14.8.2015 9:01

Matúš Petrofčík má pravdu - použij na div

background-size: contain;

A vzhledem k tomu, že to je background size, tak obrázek musí být nastaven jako pozadí divu.

Nahoru Odpovědět
14.8.2015 9:01
Neaktivní uživatelský účet
Avatar
adder
Člen
Avatar
Odpovídá na Neaktivní uživatel
adder:14.8.2015 10:49

Takhle to řešit nemůžeš, když máš několik obrázku, které generuješ, tak to nemůžeš řešit přes background-image jako v tomhle případě (zřejmě eshop).

Nahoru Odpovědět
14.8.2015 10:49
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
DooM
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
DooM:14.8.2015 11:44

Opravdu to nefungovalo, je tam asi nějaká nekompatibilita s tím naším PDF generátorem. Už jsme to vyřešili s kolegou alternativní cestou (parametry v URL).

Nahoru Odpovědět
14.8.2015 11:44
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
adder
Člen
Avatar
Odpovídá na DooM
adder:14.8.2015 11:53

Mé řešení taky nešlo? :)

Nahoru Odpovědět
14.8.2015 11:53
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
DooM
Tvůrce
Avatar
Odpovídá na adder
DooM:14.8.2015 11:59

Nevím. Nezkoušel jsem, ale pravděpodobně ne. Mám dojem, že jsem podobný způsob zkoušel.

Nahoru Odpovědět
14.8.2015 11:59
Klient: Nefunguje mi internet co s tím uděláte? Operátor: a co vidíte na monitoru? Klient: No signal...
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na DooM
TomasGlawaty:14.8.2015 16:25

jaké knihovny ? to co jsem poslal bylo čisté html/css :)

 
Nahoru Odpovědět
14.8.2015 16:25
Avatar
Odpovídá na DooM
Neaktivní uživatel:14.8.2015 17:29

No tak o PDF ses do teď nezmínil :)

Nahoru Odpovědět
14.8.2015 17:29
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Jan Lupčík:14.8.2015 17:31

Ale ano, hned na začátku to psal. :)

Exportuji html do PDF přes nějaký konvertor(nemám o něm podrobnější info, je integrovaný v naší firemní aplikaci), ale ještě se mi nepodařilo najít podporovaný způsob.

Nahoru Odpovědět
14.8.2015 17:31
TruckersMP vývojář
Avatar
Odpovídá na Jan Lupčík
Neaktivní uživatel:14.8.2015 17:35

Dobře, tak jsem debil. Omlouvám se :D

Nahoru Odpovědět
14.8.2015 17:35
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 19 zpráv z 19.