Avatar
Dominik Hošic
Redaktor
Avatar
Dominik Hošic:

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 Dominik Hošic
TomasGlawaty:

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
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Dominik Hošic
Redaktor
Avatar
Odpovídá na TomasGlawaty
Dominik Hošic:

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

Nahoru Odpovědět  -1 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ý:

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
Dominik Hošic
Redaktor
Avatar
Odpovídá na Miroslav 'jimisek' Bahenský
Dominik Hošic:

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:

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

 
Nahoru Odpovědět 14.8.2015 5:15
Avatar
Dominik Hošic
Redaktor
Avatar
Odpovídá na NouF
Dominik Hošic:

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
Šéfredaktor
Avatar
Matúš Petrofčík:

a co

background-size: contain;

?

Nahoru Odpovědět  +2 14.8.2015 5:50
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Dominik Hošic
Redaktor
Avatar
Nahoru Odpovědět  -1 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 Dominik Hošic
adder:

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  -1 14.8.2015 7:53
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Dominik Hošic
Jiří Gracík:

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  +1 14.8.2015 9:01
Creating websites is awesome till you see the result in another browser ...
Avatar
adder
Člen
Avatar
Odpovídá na Jiří Gracík
adder:

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
Dominik Hošic
Redaktor
Avatar
Odpovídá na Jiří Gracík
Dominik Hošic:

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 Dominik Hošic
adder:

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
Dominik Hošic
Redaktor
Avatar
Odpovídá na adder
Dominik Hošic:

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 Dominik Hošic
TomasGlawaty:

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

Nahoru Odpovědět 14.8.2015 16:25
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Dominik Hošic
Jiří Gracík:

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

Nahoru Odpovědět 14.8.2015 17:29
Creating websites is awesome till you see the result in another browser ...
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Jiří Gracík
IT Man:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na IT Man
Jiří Gracík:

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

Nahoru Odpovědět  +1 14.8.2015 17:35
Creating websites is awesome till you see the result in another browser ...
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.