• 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
122 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,570 p.)

1 odpowiedź

+1 głos
odpowiedź 10 sierpnia 2021 przez Comandeer Guru (602,560 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,560 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ź 754 wizyt
0 głosów
1 odpowiedź 166 wizyt
0 głosów
2 odpowiedzi 146 wizyt
pytanie zadane 1 czerwca 2017 w Grafika i multimedia przez Dorian Bajorek Dyskutant (7,920 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

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

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!

...