Usare @media per sostituire un'immagine 
Autore: Vittorio N.
Visite 1209,
Followers 2,
Condiviso 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
Postato il
... 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...
.
Autore
Grazie uso il tag inglese e l immagine sta nel contenuto di una pagina. Mi puoi aiutare con il java?
... 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>
.
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
Autore
grazie, proverò entrambe le soluzioni poi vi farò sapere