• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skalowanie zdjecia

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,142 wizyt
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

0 głosów
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
0 głosów
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.
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 bartek-koduje Bywalec (2,490 p.)

Dzieje się tak ponieważ to nie jest

<img src="" alt="">

a tło ustawione dla elementu

<section></section>

 

Podobne pytania

+1 głos
2 odpowiedzi 321 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez Dawidziu Bywalec (2,630 p.)
0 głosów
1 odpowiedź 1,062 wizyt
0 głosów
3 odpowiedzi 1,001 wizyt
pytanie zadane 25 czerwca 2019 w HTML i CSS przez michal_php Stary wyjadacz (13,700 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...