Responsywność zdjęć i tabel w opisach i CMS

[onsison]

Witam,

 

czy da się jakoś ustawić lub zrobić zdjęcia/grafiki i tabele alby dostosowywały swoją wielkość do rozdzielczości?

 

Na urządzeniach mobilnych zdjęcia które mam zamieszczone w cmsie oraz opisach produktów są ucięte i nie widać ich w całości. Podobnie sprawa ma się z tabelami.

 

Pozdrawiam
Michał

[endriu107]

Zdjęciom trzeba nadać odpowiednią klasę która będzie je skalowała.

[koening]

Daj link do sklepu to zobaczymy może da si szybko i doraźnie pomóc xd

[onsison]

Hej, dziękuje za odpowiedzi. Jak się nadaje klasę dla zdjęcia?

Tutaj przykład z zdjęciami https://avifly.pl/pl/blog/smigla-w-multicopterach-b22.html

Tutaj tablea https://avifly.pl/pl/C/wysylka-i-platnosc

Edited March 19, 2017 by onsison (see edit history)

[endriu107]

Klasę sie nadaje tak samo jak dla innych elementów html, standardowo to img-responsive.

[koening]

Możesz takze w pliku global.css mozesz dodać poniższą regułę, z importantem na wszelki wypadek.

 

#page .container #center_column p img {
display:block !important;
max-width:100%!important;
height:auto!important;
}

Edited March 20, 2017 by koening (see edit history)

[endriu107]

Dokładnie to samo daje klasa img-responsive o której pisałem, jest ona zdefiniowana już w pliku global.css:

 

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto; }

[krzysiek_web]

Lub dla wszystkich img

img {
  display: block;
  max-width: 100%;
  height: auto; }

ale wtedy dodatkowo dodać sekcję media queries dla niskich rozdzielczości. 

[tom]

Witam serdecznie,

Chodzi o standardowy szablon classic, Prestashop 1.7.4.2

Usunąłem klasę ,,hidden-sm-down'' z pliku category.tpl ponieważ blok kategorii nie był widoczny w wersji mobilnej. Nic więcej poza tym nie zmieniałem.

Zdjęcia dodawane przez panel administracyjny w opisie pola kategorii (Katalog/kategoria) nie chce mi zmieniać rozmiaru przy użyciu porad wyżej wymienionych.

Dodaję zdjęcie standardowo w opisie:  <p><img src="........." alt="nazwa" width="X00" height="X00" /> </p>                  X - liczba

zmieniam na: <p> <img class="img-responsive" src="........." alt="nazwa" width="X00" height="X00" /> </p>

Nie działa.

Blok kategorii zmienia rozmiar a zdjęcia nie.

Pliku global.css nie moge znaleźć w Prestashop 1.7

Może trzeba zmienić jakieś ustawienie w panelu administracyjnym Konfiguruj/preferencje lub Konfiguruj/zaawansowane aby się aktywowała responsywność zdjęć, tak jak jest to w przypadku ,,Pozwól na iframes w polach takich jak opis produktu. 

Choć może mieć to związek, że blok kategorii był wcześniej ukryty.

Logo sklepu oraz tekst na stronie ,,Przerwa techniczna'' po wyłączeniu sklepu też nie zmienia rozmiaru.

Proszę o pomoc.

Edited September 22, 2018 by tom (see edit history)

[krzysiek_web]

Usuń zadeklarowane wymiary zdjęcia. 

[endriu107]

Dodatkowo jeśli to wersja 1.7 to ona korzysta z bootstrapa 4 a w nim nie ma już klasy img-responsive, dlatego warto zaglądnąć do dokumentacji i skorzystać z poprawnej klasy jaką jest img-fluid.