WebSite X5Help Center

 
Vittorio N.
Vittorio N.
User

Usare @media per sostituire un'immagine  it

Autor: Vittorio N.
Visitado 1306, Followers 2, Compartido 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

Publicado en
5 RESPUESTAS
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes 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...

.

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Vittorio N.
Vittorio N.
User
Autor

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

Leer más
Publicado en de Vittorio N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuario del mes ESUsuario del mes 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>

.

Leer más
Publicado en 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

Leer más
Publicado en de Fabio B.
Vittorio N.
Vittorio N.
User
Autor

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

Leer más
Publicado en de Vittorio N.