Diskuze: Dá sa v css nastaviť veľkosť obrázku prispôsobená nastaveniu monitora?

Aktivity

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):1.3.2014 11:31

Testujem slideshow od "Silvinios" a chcel by som, aby boli obrázky na celú obrazovku.
Má tam kód:

img.slide {
  width: 1088px;
  height: 680px;
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  opacity: 0;
}

ale ten nastavuje konkrétne rozmery 1088 * 680px.
Je možné nastaviť to tak, aby sa rozmery prispôsobili nastaveniu monitora užívateľa, ktorý slideshow pozerá?

Odpovědět

1.3.2014 11:31

Aj tisícmíľová cesta musí začať jednoduchým krokom.

Honza Bittner

Tvůrce

Honza Bittner:1.3.2014 11:43

background-size: cover;

Nahoru Odpovědět

1.3.2014 11:43

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

KleoCZ

Člen

KleoCZ:1.3.2014 17:31

Jak psal Honza je to přes

background-size: cover;

... zde jsem vytvořil náhled http://jsfiddle.net/Kleo86/6FQ88/1/ ... šlo by to i s

height:100%;
width:100%;

ovšem může myslím vznikat deformace poměrů stran obrázku !!! nejlepší je to vyzkoušet

Editováno 1.3.2014 17:32

Nahoru Odpovědět

1.3.2014 17:31

Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):1.3.2014 20:20

Ďakujem chlapci.

Nahoru Odpovědět

1.3.2014 20:20

Aj tisícmíľová cesta musí začať jednoduchým krokom.

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):1.3.2014 22:33

Tie percentá mi nejak nefungujú. Treba zmeniť aj niečo iné?

img.slide {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  opacity: 0;
}

Nahoru Odpovědět

1.3.2014 22:33

Aj tisícmíľová cesta musí začať jednoduchým krokom.

David Hynek

Tvůrce

David Hynek:1.3.2014 22:42

co podle tebe znamená 50% z něčeho? Není to náhodou polovina? Co místo 50% použít 100%?

Nahoru Odpovědět

1.3.2014 22:42

Čím víc vím, tím víc věcí nevím.

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):1.3.2014 22:59

Skúšal som to, ale obrázok sa mi vôbec nezobrazil.
Preto som použil len hodnotu height: 600px; a tá druhá sa mi dopočíta sama. Toto mi už vyhovuje.

Nahoru Odpovědět

1.3.2014 22:59

Aj tisícmíľová cesta musí začať jednoduchým krokom.

KleoCZ

Člen

KleoCZ:1.3.2014 23:10

Doporučuji vypnout(smazat)

opacity: 0;

... Jinak opravdu nic neuvidíš

Nahoru Odpovědět

1.3.2014 23:10

Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):1.3.2014 23:35

Aha, to som nevedel, dík.

Nahoru Odpovědět

1.3.2014 23:35

Aj tisícmíľová cesta musí začať jednoduchým krokom.

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):1.3.2014 23:39

Toto mám:

img.slide {
  border-style: solid;
  border-color: pink;
  height: 100%;
  /*height: 600px;*/
  position: absolute;
  display: block;
  /*opacity: 0;*/
}

a obrázky nevidno.

Nahoru Odpovědět

1.3.2014 23:39

Aj tisícmíľová cesta musí začať jednoduchým krokom.

Libor Šimo (libcosenior)

Tvůrce

Libor Šimo (libcosenior):2.3.2014 0:08

Len pre zaujímavosť sem dám odkaz na testovaciu stránku.
libco-testy.wz.sk
Je to urobené pre potešenie mojich blízkych. ;-)

Nahoru Odpovědět

2.3.2014 0:08

Aj tisícmíľová cesta musí začať jednoduchým krokom.

David Hynek

Tvůrce

David Hynek:2.3.2014 8:58

u body máš nataveno 50EM. když pak potomku dáš šířku 100% tak to zdědí tuto šířku. Body nastav na 100%. Totéž nastav DIV "slideshow".

Nahoru Odpovědět

2.3.2014 8:58

Čím víc vím, tím víc věcí nevím.

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 12 zpráv z 12.