Skalowanie zdjecia

pytanie zadane 22 sierpnia 2017 w HTML i CSS przez wariacik Użytkownik (680 p.)

Witam

Jak osiagnac taki efekt jak na tej stronie: http://masarniabukowina.pl/

Chodzi mi o to pierwsze duze zdjecie gdzie wraz ze zmiana rozmiaru okna ono sie tak fajnie skaluje

2 odpowiedzi

odpowiedź 22 sierpnia 2017 przez Milesky Nowicjusz (180 p.)

Jeżeli dobrze zrozumiałem pytanie, to sądzę, że odpowiedzą będą Media Querry.
Kiedy okno przeglądarki ma pewien rozmiar, wykonywane są instrukcje css w tym wypadku zmiana właściwości owego obrazka.
Ten filmik może być pomocny: https://www.youtube.com/watch?v=5xzaGSYd7jM

Może ciebie także zainteresować efekt Parallax stron internetowych, który jest użyty na owej stronie:https://www.youtube.com/watch?v=JttTcnidSdQ&t=718s

komentarz 22 sierpnia 2017 przez wariacik Użytkownik (680 p.)

no tak ale czy w media query nie jest tak ze obrazek zmieni rozmiar dopiero przy osoagnieciu danego rozmiaru okna ustawionego w media query?

Bo tutaj z kazda nawet najmniejsza zmiana okna przegladarki obraz zmiena rozmiar

komentarz 22 sierpnia 2017 przez Milesky Nowicjusz (180 p.)

Ustaw właściwość background-size:cover; dla tła. Może o to ci chodzi.

#bg
{
  background-image: url("bg.jpg");
  height:50vh;
  background-size: cover;
  margin-top: 10%;
}

ja ustawiłem takie właściwości i sądzę, że o ten efekt Tobie chodziło.

komentarz 22 sierpnia 2017 przez wariacik Użytkownik (680 p.)

O tak teraz dobrze to sie zachowuje tylko przy duzym ekranie ucina mi dolną polowe zdjecia nawet kiedy zwiekszylem wysokosc. Na małym ekranie jest idealnie

odpowiedź 22 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

Jeśli sobie włączysz "Narzędzia Developerskie" np. w chrome (F12) i zaznaczysz obszar, który Cię interesuje to w zakładce Styles zobaczysz w jaki sposób ten element się zmienia podczas zmniejszania szerokości okna.

Przede wszystkim jest to background-image w CSS i zależności od szerokości okna (media query) zmienia się jego wysokość i w pewnym momencie background-position.