WebSite X5Help Center

 
Vittorio N.
Vittorio N.
User

Usare @media per sostituire un'immagine  it

Auteur : Vittorio N.
Visité 1303, Followers 2, Partagé 0  

ciao e buon anno a tutti

forse chiedo la luna ma è possibile, ad una determinata larghezza (esempio 719 px), sostituire in una determinata cella un'immagine con un'altra con il codice @media(mas-width 719px) o simile?

premetto che l'immagine da sostituire è richiamata nella cella con codice html (img src="images/...).

grazie

Posté le
5 RéPONSES
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... io non ho il programma, ma secondo me potresti gestire semplicemente tramite le impostazioni mostra/nascondi previste nella configurazione dei breackpoint... 

... in extra, a grandi linee, ed in base alla struttura reale, se l'immagine la inserisci come sfondo (background), regolata quindi dal codice style css, allora potresti usare il media_query (@media)...

... se usi invece il tag img  potresti sostituire l'immagine tramite JavaScript...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Vittorio N.
Vittorio N.
User
Auteur

Grazie uso il tag inglese e l immagine sta nel contenuto di una pagina. Mi puoi aiutare con il java?

Lire plus
Posté le de Vittorio N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... per esempio così:

<img id="immagine" src="immagine1.jpg">
<script> window.onload= function () { sostituisceK()}
window.onresize= function () { sostituisceK()}
function sostituisceK() {
var larghezza = window.innerWidth;
if (larghezza <= 800) {
document.getElementById("immagine").src = "immagine1.jpg";
} else {
document.getElementById("immagine").src = "immagine2.jpg";
} } </script>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Fabio B.
Fabio B.
User

da programma puoi inserire nel contenuto della pagina la stessa immagine in due misure diverse in due oggetti immagine contigui; poi gestisci la visualizzazione delle rispettive celle nei diversi breakpoint; le media-query te le genera il programma stesso senza metter mano ai codici

Lire plus
Posté le de Fabio B.
Vittorio N.
Vittorio N.
User
Auteur

grazie, proverò entrambe le soluzioni poi vi farò sapere

Lire plus
Posté le de Vittorio N.