HTML5 <picture> e i file source

[MarcoGrazia]

Con HTML5 è stato introdotto l'elemento <picture> e di conseguenza i suoi sottotag <source> per definire un file alternativo, così che il browser possa decidere quale caricare in funzione delle sue caratteristiche.

                        <picture>
                            <source srcset="../img/foto/immagine.webp" class="img-responsive" type="image/webp">
                            <source srcset="../img/foto/immagine.jpg" class="img-responsive" type="image/jpg">
                            <img src="../img/foto/immagine.jpg" class="img-responsive" alt="Stemma della famiglia XYZ">
                        </picture>

Ora source non prevede class come attributo, però ho notato che se non ce lo metto l'immagine caricata mi va nel pallone (è il caso della webp ) Firefox ultimo modello.
Eppure il sistema è semplice, in teoria, il browser carica in <img> il file che riesce a leggere, sia webp che quelli predefiniti, in funzione delle sue capacità, quindi class in source non ha senso, eppure...

 

[WmbertSea]

source non prevede class come attributo

Ciao, giusto per precisare, l'attributo class è un attributo globale utilizzabile indistintamente su qualsiasi tag html. Può essere usato per vari scopi, sia per l'applicazione di css sia per identificare gli elementi via javascript.

Nel tuo specifico caso potrebbe anche non avere senso usare quella classe sugli elementi source se serve solo per applicare una particolare presentazione attraverso i css ‒ in tal caso basterebbe usarla solo sull'elemento img (come tu stesso supponi) ‒ ma bisognerebbe verificare cosa fa esattamente quella classe per poter capire quale sia il problema quando la togli dai source.

Dal solo codice che hai postato è pressoché impossibile risalire alle cause del problema e/o fornirti un qualche tipo di aiuto.

Possibilmente posta un link alla pagina in questine o ad un esempio minimo riproducibile.

 

[MarcoGrazia]

Ciao, giusto per precisare, l'attributo class è un attributo globale utilizzabile indistintamente su qualsiasi tag html. Può essere usato per vari scopi, sia per l'applicazione di css sia per identificare gli elementi via javascript.

Nel tuo specifico caso potrebbe anche non avere senso usare quella classe sugli elementi source se serve solo per applicare una particolare presentazione attraverso i css ‒ in tal caso basterebbe usarla solo sull'elemento img (come tu stesso supponi) ‒ ma bisognerebbe verificare cosa fa esattamente quella classe per poter capire quale sia il problema quando la togli dai source.

Dal solo codice che hai postato è pressoché impossibile risalire alle cause del problema e/o fornirti un qualche tipo di aiuto.

Possibilmente posta un link alla pagina in questine o ad un esempio minimo riproducibile.

Risolto, nel senso che l'elemento souce accetta sì tuti gli attributi globali, compreso class ma non serve a nulla messo lì, se non per un'identificazione globale attraverso una classe fittizia, come hai detto anche tu, cosa per altro che non avrebbe senso, dato che source non modifica visivamente il file definito in srcset.
In effetti source serve solo a portare dei file alternativi a quello che dovrà essere visualizzato dal sottostante elemento img, se di immagini si tratta, quindi non ha senso applicare una classe qui.
La classe è tuta qui:

--bs-border-color:#dee2e6;

.img-thumbnail{
padding:.25rem;
background-color:#fff;
border:1px solid var(--bs-border-color);
border-radius:.375rem;
max-width:100%;
height:auto
}

Non dovrebbe influenzare certo quell'elemento.