• 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

Aruba Cloud - Virtual Private Server VPS
0 głosów
781 wizyt
pytanie zadane 8 lipca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 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 Ekspert (227,490 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 Mądrala (5,470 p.)
OK. A co mógłbym zrobić aby ustawić zdjęcia koło siebie?
komentarz 8 lipca 2018 przez Tomek Sochacki Ekspert (227,490 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 Mądrala (5,470 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 Mądrala (5,470 p.)

To pomożeszlaugh?

komentarz 8 lipca 2018 przez Tomek Sochacki Ekspert (227,490 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 Mądrala (5,470 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 2,003 wizyt
0 głosów
1 odpowiedź 871 wizyt
pytanie zadane 19 maja 2019 w HTML i CSS przez husarbilu Początkujący (370 p.)
0 głosów
1 odpowiedź 1,041 wizyt
pytanie zadane 26 czerwca 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,140 p.)

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,664 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!

...