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

Zmiana wielkości skalowanych obrazków

0 głosów
50 wizyt
pytanie zadane 8 lipca 2018 w HTML i CSS przez Layoutowiec Gaduła (4,550 p.)

Witam wszystkich!

Więc mam problem: 

Chciałbym aby zdjęcia na mojej stronie się skalowały wraz z wielkością ekranu.

No i mam taki kod:


<section>
 
    <div class="image" >
        <img src="img/nature.jpg"  alt="alternative text"></a>
    </div>    
 
    <div class="image" >
        <img src="img/mountains.jpg"   alt="alternative text"></a>
    </div> 
 
    <div class="image">
        <img src="img/sea.jpg"   alt="alternative text"></a>
    </div>  
 
    <div class="image">
        <img src="img/cliff.jpg"  alt="alternative text"></a>
    </div> 
 
    <div class="image">
        <img src="img/city.jpg"   alt="alternative text"></a>
    </div> 
 
    <div class="image">
        <img src="img/freedom.jpg"  alt="alternative text"></a>
    </div>
    
 
 
</section>
.image 
{
    width: 100%;
}


.image img 
{
    width: 100%;
}

 

I na mniejszych wielkościach ekranu fajnie się to skaluje ale na ekranie komputera zajmuje 100% szerokości no i dałoby się coś z tym zrobić aby skalowało się na mniejszych ekranach a na komputerze zajmowało X pixeli 

1 odpowiedź

0 głosów
odpowiedź 8 lipca 2018 przez Tomek Sochacki Mędrzec (186,730 p.)
Najłatwiej po prostu zastosować jakiś breakpoint w media query, dla którego chcesz 100% zamienić na jakąś stałą wartość.
komentarz 8 lipca 2018 przez Layoutowiec Gaduła (4,550 p.)
OK. A co mógłbym zrobić aby ustawić zdjęcia koło siebie?
komentarz 8 lipca 2018 przez Tomek Sochacki Mędrzec (186,730 p.)
Ja bym to zrobił po prostu flexboxem i warto ustawić wtedy też flex-wrap: wrap żeby w razie czego obrazki ładnie zawijały się i kwestia pozycjonowania, np. justify-content: space-between, space-evenly itp. to już zależy co chcesz osiągnąć.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ewentualnie bawić się css grid ale tu nie pomogę bo nie pracowałem z tym jeszcze.
komentarz 8 lipca 2018 przez Layoutowiec Gaduła (4,550 p.)

Próbowałem na flexboxie ale jakoś mi nie szło i tak chyba mi będzie łatwiej. Lecz myślę że wykorzystam go w moim następnym projekcielaugh

A z tym kodem już zostało mi tylko ustawienie tych zdjęć obok siebie i moja strona będzie miała pełne RWD smiley A więc bardzo bym Cię prosił abyś mi powiedział co trzeba dodać żeby zdjęcia ustawiły się obok siebie :)

komentarz 8 lipca 2018 przez Layoutowiec Gaduła (4,550 p.)

To pomożeszlaugh?

komentarz 8 lipca 2018 przez Tomek Sochacki Mędrzec (186,730 p.)
Kolego, powiem Ci, że chętnie pomagam na tym forum ale już mam w ostatnim czasie na prawdę myślówkę czy w ogóle to forum ma sens istnienia... Napisałem Ci żebyś użył media query, jak nie wiesz co to to wystarczy 5 sekund googlowania :( Potem poleciłem Ci flex.. napisać takie sztywne ustawienie wymiarów obrazków i spozycjonować je na flexie to 3 minuty... dostałeś gotowy poradnik, jeden z lepszych moim zdaniem ale nie... po co czytać, po co się męczyć jak można wciaż prosić o gotowce... ręce opadają...

Sam wielokrotnie szukam różnych rzeczy w necie, niedawno poświęciłem prawie godzinę żeby rozkminić jedno ustawienie webpacka ale w końcu udało mi się w issues GH znaleźć rozwiązanie w pełni mnie satysfakcjonujące, a raczej wskazówkę co poprawić. Dlaczego to piszę? Dlatego, że widzę, iż tutaj chyba z 70% ludzi nawet nie wysili swoich pięknych paluszków żeby wyszukać coś w google, na SO, na GH itp. itd. tylko wali na forum "pomóżcie, dajcie gotowca bo se nie radzę...".

Pomoc na forum to wg mnie nie zawsze otrzymanie w pełni gotowca ale po prostu wskazanie kierunku. Ja również parokrotnie zadawałem pytania na tym forum choć przyznam, że generalnie odzew na pytania stricte programistyczne nie jest duży, ale otrzymałem jasne wskazówki (jedno pytanko związane z problemem rozmywania czcionek w Electronie) czy propozycje API i bibliotek np. gdy pytałem o coś dobrego do generowania pdf client-side czy o jakieś fajne api pogodowe... Ale nie prosiłem "słuchajcie, no oki, ale napisz mi jak to API wykorzystac, jak tę bibliotekę użyć w moim przypadku, hej, daj gotowca..." tylko po prostu wszedłem, ściągnąłem, zrobiłem sobie jakieś małą próbkę i dopiero ruszyłem z tematem na kod produkcyjny... Trochę Kolego daj też od siebie...
komentarz 8 lipca 2018 przez Layoutowiec Gaduła (4,550 p.)
Ok. Ale ja nie wszedłem teraz na forum po gotowca bo męczę się już chyba 3 dzień z tymi zdjęciami spędzając po plus minus 10 godzin dziennie na to i próbowałem wielu metod i dzisiaj po kilku godzinach szukania w google znalazłem obecny kod i stwierdziłem że to może mi pomóc, ale po tym jak powiedziałeś mi aby użyć breakpointa na media queries wszystko jest już fajnie ale nie wiem co zrobić aby zdjęcia układały się obok siebie. Próbowałem usuwać marginesy itd. ale nic nie może mi pomóc dlatego zapytałem

Jeżeli jestem uciążliwy to przepraszam

Podobne pytania

0 głosów
2 odpowiedzi 840 wizyt
0 głosów
1 odpowiedź 60 wizyt
pytanie zadane 19 maja w HTML i CSS przez husarbilu Początkujący (320 p.)
0 głosów
1 odpowiedź 338 wizyt
pytanie zadane 26 czerwca 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,160 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

65,676 zapytań

112,314 odpowiedzi

237,031 komentarzy

46,653 pasjonatów

Przeglądających: 139
Pasjonatów: 2 Gości: 137

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...