Logowanie

Jak dostosować szerokość zdjęcia na stronie do wielkości ekranu?

pytanie zadane 26 lipca 2017 w HTML i CSS przez xdmik23 Gaduła (3,000 p.)

Witam! Chcialbym na stronie internetowej umieścić zdjęcia na calą szerokość ekranu.Problem w tym,że nie wiem jak zrobić,by zdjęcie o dowolnym rozmiarze zawsze zajmowalo calą szerokośc ekranu.Może ktoś mi pomóc?

Z góry dzieki!

1 odpowiedź

odpowiedź 26 lipca 2017 przez Eimens Maniak (69,240 p.)

możesz to wymusić i dać:

width: 100%;
height: 100vh;

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

co znaczy to vh?

komentarz 26 lipca 2017 przez pablop76 VIP (123,180 p.)

Witam. Wpisz w wyszukiwarkę "vh css" :)

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

ok dzięki,pierwszy raz z tym się spotkalem.Myslisz,że jaki rozmiar obrazu bedzie najbardziej odpowiedni,żeby zdjęcie nie zajmowalo dużo miejsca,a dodatkowo nie tracilo swojej jakości na wiekszych ekranach?

komentarz 26 lipca 2017 przez pablop76 VIP (123,180 p.)

To jakie zdjęcie użyjesz zależy od szablonu strony. Będzie miało taką szerokość jak szerokość kontenera w którym się znajduje. Dobrym pomysłem jest używanie kompresorów do zdjęć np: https://compressor.io/ lub https://tinypng.com/

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

a mogę zapytać jak tego poprawnie używać?Pytanie może glupie,ale ja naprawde jestem zielony w tej kwestii

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

testowalem dzialanie zarowno vh jak i vw i efekt nadal nie jest zadowalający (zdjecie jest lekko przyciete u gory i u dolu).Wiecie jak to zrobić,by wszystko dzialalo dobrze?

komentarz 26 lipca 2017 przez pablop76 VIP (123,180 p.)

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

nie chodzi o kompresor(akurat z tym nie ma problemu),chodzi mi o moj problem opisany we wątku

komentarz 26 lipca 2017 przez pablop76 VIP (123,180 p.)

Wstawianie tła na stronę

Chyba, że obrazki masz wstawione jako img w html.

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

dzięki,przeczytam,przetestuje i dam znać co i jak

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

Myślisz,że jak napisze background-size:cover to będzie to wystarczająco,żeby obraz byl zawsze w pelnej szerokosci ekranu,no i chyba też przekonwertuje jpg/png na svg

komentarz 26 lipca 2017 przez pablop76 VIP (123,180 p.)

dałbym jeszcze

background-position: center;
background-repeat: no-repeat;

A co do formatu to nie wypowiem się.

komentarz 26 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

ok dzięki.Narazie oglądam na yt tutoriale związane z moim problem,na które trafilem tylko dzieki linkowi,ktory podeslales do strony Pana Zelenta

komentarz 27 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

http://webkod.pl/kurs-css/wlasciwosci/wszystkie/background-repeat Nie rozumiem o co chodzi im na tej stronie ze stwierdzeniem,że "obrazek sie powtarza" mozecie mi rozjasnic sprawe?

komentarz 27 lipca 2017 przez pablop76 VIP (123,180 p.)

repead (en) - powtarzać. Oznacza, że obrazek żeby wypełnić całą przeztrzeń będzie się "klonował" w pionie i w poziomie.

Można to zmienić za pomocą właściwości css background-repead.

komentarz 27 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

teraz to już w ogole nic nie rozumiem

komentarz 27 lipca 2017 przez Chess Szeryf (76,710 p.)

pablop76 zapewne pomylił się w pisowni, chodziło mu raczej o "repeat", nie "repead".

komentarz 27 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

a co znaczy to "klonowanie"?

komentarz 27 lipca 2017 przez Chess Szeryf (76,710 p.)
edycja 27 lipca 2017 przez Chess

Kopiowanie z jednego miejsca i wklejanie go do drugiego.

background-image:url("path_to_image.png");
background-repeat:repeat;

komentarz 28 lipca 2017 przez pablop76 VIP (123,180 p.)

repeat oczywiście

komentarz 28 lipca 2017 przez pablop76 VIP (123,180 p.)

Obejrzyj Reksia 36 sekunda. https://youtu.be/SIzeicY7QyA

Tak się kopiuje obraz w poziomie gdy ma wolną przeztrzeń, jeżeli się skończy to przechodzi do nowego "wiersza" i dalej się kopiuje aż wypełni całą .

komentarz 28 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

Już nic z tego nie ogarniam.Dlaczego jedne zdjecia rzeczywiscie otwieraja się na pelnej szerokosci ekranu poprawnie,a z kolei inne są od dolu uciete?Niech ktos mi pomoże, bo już mnie to wnerwia

komentarz 28 lipca 2017 przez pablop76 VIP (123,180 p.)

Ze względu na zachowanie proporcji. Podstawaiasz obrazy o różnych proporcjach.

komentarz 28 lipca 2017 przez xdmik23 Gaduła (3,000 p.)

to co mam zrobić,żeby zawsze bylo ok?

Podobne pytania

0 głosów

1 odpowiedź 131 wizyt

Jak ustalić stałą szerokość wszystkich elementów menu

pytanie zadane 15 czerwca 2017 w HTML i CSS przez xdmik23 Gaduła (3,000 p.)

0 głosów

2 odpowiedzi 185 wizyt

Jak zrobić prawidlowo tlo w postaci zdjecia na pelnej szerokosci ekranu?

pytanie zadane 29 lipca 2017 w HTML i CSS przez xdmik23 Gaduła (3,000 p.)

0 głosów

2 odpowiedzi 357 wizyt

Stała szerokość strony

pytanie zadane 28 stycznia 2017 w HTML i CSS przez BluK Początkujący (410 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...