☰

» »

Fluid ? gallery

Fluid ? gallery

BRBR ::

primer:
https://www.flickr.com/photos/ralfs-fot...

Tole je videti kot navaden div napolnjen s slikami (pri browser window resize)
Kako je narejeno, da so vse slike v eni vrstici enake višine, raztegnjene do konca vrstice in da ni nobene distorzije ?

avian2 ::

To je ta moderni splet. Za tem navadnim divom je ena gora Javascript kode, vezane na window resize event. Vsakič preračunajo in nastavijo višino in širino slik glede na velikost okna in potem dinamično nastavijo CSS.

Izklopi Javascript v brskalniku in se slike ne bodo več prilagajale velikosti okna.

Stari89 ::

Desni gumb, inspect in si poglej, kaj se dogaja v ozadju.


Takole na hitro mi v tem primeru izgleda, da za vse skrbi Javascript, ki določi višino in širino elementa (z vnaprej določenimi razmerji). Na element je kot ozadje nalepljena slika, ki se prilagodi elementu in kar je preveč, se enostavno poreže (background-size: cover).
Izi pizi za razumet, ne tako izi za implementirat.

BRBR ::

https://www.w3schools.com/cssref/css3_p...
cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges


Hja zgleda da naredi tudi stretch, samo da pride tako majhen da se ne opazi.

Zgodovina sprememb…

  • spremenil: BRBR ()

Stari89 ::

Mislim, da cover ne spremeni aspect ratio slike. Vir

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298346097 (5234) sunniegoldie
»

Prikaz spletne strani na mobilnem terminalu

Oddelek: Izdelava spletišč		173501 (2795) 4kik4
»

[JavaScript] Kako zatemniti ozadje?

Oddelek: Izdelava spletišč		10895 (644) MrBrdo
»

vertikalno centriranje strani

Oddelek: Izdelava spletišč		181612 (1301) rokpok
»

Velikost WEB strani

Oddelek: Izdelava spletišč		161710 (1357) njok

Več podobnih tem