• 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

VPS Starter Arubacloud
0 głosów
492 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,510 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,510 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,510 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 1,533 wizyt
0 głosów
1 odpowiedź 653 wizyt
pytanie zadane 19 maja 2019 w HTML i CSS przez husarbilu Początkujący (370 p.)
0 głosów
1 odpowiedź 977 wizyt
pytanie zadane 26 czerwca 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,140 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...