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

Zmiana zdjęcia w object data wraz ze zmianą rozdzielczości ekranu

Object Storage Arubacloud
+1 głos
119 wizyt
pytanie zadane 9 sierpnia 2021 w HTML i CSS przez xjafajx Użytkownik (740 p.)

Cześć,

 

Czy może mi ktoś doradzić jak podmieniać url w atrybucie object[data] jeżeli zmienię rozdzielczość

 

Dla ekranów w których rozdzielczość jest większa od 1024 mam tak zapisany kod

<object type="image/svg+xml" data="./images/large.svg" style="pointer-events: none;" >
     Twoja przeglądarka nie obsługuje SVG
</object>

a jak podmieniać url w atrybucie data jeżeli dla małych ekranów chcę mieć

data="./images/small.svg"

 

Z góry dziękuję za wszelką pomoc

komentarz 10 sierpnia 2021 przez VBService Ekspert (254,490 p.)

1 odpowiedź

+1 głos
odpowiedź 10 sierpnia 2021 przez Comandeer Guru (602,380 p.)

A czemu stosujesz object do wstawiania SVG? O wiele prościej byłoby to osiągnąć przy pomocy np. picture:

<picture>
    <source srcset="male.svg" media="(max-width: 600px)">
    <img src="normalne.svg" alt="Opis">
</picture>

Picture ma też tę zaletę, że można dodać tekst alternatywny do obrazka, co jest niezwykle istotne z punktu widzenia dostępności.

Ogólnie, jeśli nie ma takiej potrzeby (a w większości przypadków nie ma), do wstawiania SVG o wiele lepiej stosować picture/img albo element svg.

komentarz 10 sierpnia 2021 przez xjafajx Użytkownik (740 p.)
Tylko że to SVG jest z animacją więc wpisując ten kod co przesłałeś nie odczytuje mi żadnego SVG :(
2
komentarz 10 sierpnia 2021 przez Comandeer Guru (602,380 p.)

Ok, a próbowałeś wstawić inline SVG? Czyli po prostu do pliku HTML wpakować te pliki SVG w elementy svg? IMO wciąż jest to lepsze niż object.

Niemniej tak, animacje to jeden z tych przykładów, gdzie object zadziała lepiej (czy też w ogóle). W tym wypadku są dwie możliwości:

  1. posiadanie dwóch object w kodzie i po prostu ukrywanie ich w zależności od rozdzielczości. Można to wykonać przy pomocy media queries.
  2. podmiana dynamicznie atrybutu [data] przy pomocy JS-a. Aktualną szerokość viewportu można wykryć przy pomocy matchMedia.

Podobne pytania

0 głosów
1 odpowiedź 739 wizyt
0 głosów
1 odpowiedź 166 wizyt
0 głosów
2 odpowiedzi 143 wizyt
pytanie zadane 1 czerwca 2017 w Grafika i multimedia przez Dorian Bajorek Dyskutant (7,920 p.)

92,660 zapytań

141,553 odpowiedzi

319,993 komentarzy

62,028 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...