• 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

VPS Starter Arubacloud
+1 głos
112 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 (251,210 p.)

1 odpowiedź

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

92,452 zapytań

141,262 odpowiedzi

319,077 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!

...