Rozmiar obazka w CSS responsywność

pytanie zadane 16 maja 2018 w HTML i CSS przez Rafik Obywatel (1,870 p.)
edycja 16 maja 2018 przez Rafik

Witam!

Na stronie mam zdjęcia które pobierają się z bazy danych. Stronę przystosowałem do różnych urządzeń mobilnych zmieniając rozmiary elementów w CSS. Mam jednak problem ze zdjęciami, jak dodam w HTMLu wysokość i szerokość działa poprawnie

<img src="<?php echo $fetch['lokalizacja'] ?>" width="200px" height="200px">

ale kiedy chcę wrzucić width i height do CSS to nie działa, próbowałem w ten sposób:

<img class="foto" src="<?php echo $fetch['lokalizacja'] ?>">

i CSS:

.foto {

    width: 200px;
    height: 200px;

}

komentarz 16 maja 2018 przez shotokan Nałogowiec (39,660 p.)

Na pewno dobrze podpiąłeś style CSS do tego pliku php?

komentarz 16 maja 2018 przez Rafik Obywatel (1,870 p.)

Tak, bo pozostałe elementy działają. To zdjęcie wyświetla się w ramach galerii fancybox i zauważyłem, że wcześniej jest class="fancybox" czy ona przypadkiem nie koliduje ?

cała linijka kodu:

<div class="zdjecia"><a href="<?php echo $fetch['lokalizacja'] ?>" class="fancybox" rel="gallery"><img class="foto" src="<?php echo $fetch['lokalizacja'] ?>" width="200px" height="200px"></a></div>

komentarz 16 maja 2018 przez shotokan Nałogowiec (39,660 p.)

Nie wiem, jak wygląda Twój plik CSS, być może style klasy foto są nadpisane innymi stylami, a jak dałeś w HTMLu to ten zapis ma wyższy priorytet niż style w pliku CSS.

komentarz 16 maja 2018 przez Rafik Obywatel (1,870 p.)

Klasa foto w CSS jest ostatnia więc nic jej nie nadpisuje. wygląda to tak jakby w ogóle nie pobierało rozmiaru z CSS i wyświetlało zdjęcie w oryginalnym rozmiarze.

1 odpowiedź

odpowiedź 16 maja 2018 przez niezalogowany

spróbuj

.foto {
 
    max-width: 100%;
    height: auto;
 
}

To powinno załatwić responsywność.

komentarz 16 maja 2018 przez Rafik Obywatel (1,870 p.)
edycja 16 maja 2018 przez Rafik

Nie działa, to są miniaturki zdjęć w ramach galerii JS po kliknięciu pojawią się w oryginalnym rozmiarze. Na komputerze strona wygląda dobrze, ale na urządzeniach mobilnych już słabo bo zdjęcia wychodzą poza obręb, chciałem więc je przy mniejszy rozdzielczościach zmniejszyć np, żeby miniaturki wyświetlały się 100x100.