html come mostrare immagini differenti in base al device: cioè Media Queries con Bootstrap 4.3

Stai cercando come mostrare 2 immagini differenti in base al device? E stai cercando di fare questo usando Bootstrap? Se si io ...

Stai cercando come mostrare 2 immagini differenti in base al device? E stai cercando di fare questo usando Bootstrap? Se si io avevo la stessa necessità perché sui cellulari avevo la necessità di mostrare una foto più alta che larga, mentre sui desktop il contrario

Secondo i programmatori noi grafici dovremmo fare impaginazioni responsive e quindi scegliere immagini che vadano bene per i vari Device e magari mettere del testo che si adatta ad esso. Quello che non sanno i programmatori è che per un grafico è più facile e veloce fare 2 immagini con impaginazioni differenti.

Per vedere al meglio questo esempio ti consiglio di navigare questa pagina con un monitor e non con un cellulare. Ti consiglio infine di cliccare su ispeziona codice del tuo browser, meglio se con Chrome e cliccare sulle prime icone della finestra di ispezione per passare dalla visualizzazione Mobile a quella Desktop, perché questo è il modo migliore per vedere come cambiando la larghezza del "device" e del "browser" cambierà anche l'immagine proposta. Quindi ho creato una immagine 1200x1200 per i cellulari che si riadatterà responsive sotto i 980px e una immagine 1200x680 che si adatterà responsive sopra i 980px

<style>@media all and (max-width: 980px) {.nocell {display:none;}} @media all and (min-width: 980px) {.nodesktop {display:none;}} </style> <div class="container-fluid nodesktop" style="background-color:; padding: 0px;"> <div class="row"> <!--Immagine per Cellulare --> <div class="col"> <img alt="" border="0" class="nodesktop" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhMgbHk5_gc1eLGP40m8kCEiTVeGlVnWz2UqLadyrPkOvVYckrQ0HnEAxzgmtqflTOEOEEVcYAe-ugIIHe8rkoY2171TiyLsAnWoYE63oE_n3LHuOfmhqxRD8n6KL0F3mFlTVHY4ivbDEbrTot7cLw-ZgrfjJMjwbUcFhN-iZ8dWTvXP7Yg1uUaLu/s1600/2023-04-Ballo-Divento-1200x1200v3-1.jpg" style="border: 0px solid rgb(204, 204, 204);" width="100%" /> </div> </div> </div> <div class="container nocell" style="background-color:; padding: 0px;"> <div class="row"> <!--Immagine per Desktop --> <div class="col"> <img alt="" border="0" class="nocell" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpyOAB7TGJccR38e9csmi8UdICd_3DfuVQEywDqAnnvLjMIpA-JccnkULNtQ1oBMKlvaXRGWU550f-U-Kn9cvFi45cr1Y9E_lMPokEnQolzeypZJ24qJbFhM_iZF6Q3tswMZJT70jDT5_AhzhxzxbccGvHchyinS7gDWt4hdFPqzzmCWayMFCAXGX/s1600/2023-04-Ballo-Divento-Corsi-di-Ballo-TS-Desktop.jpg" style="border: 1px solid rgb(204, 204, 204);" width="100%" /> </div> <!--/Immagine --> </div> </div>

Attento alla sintassi del CSS perché come puoi vedere 

<style>
@media all and (max-width: 980px) {.nocell {display:none;}}
@media all and (min-width: 980px) {.nodesktop {display:none;}}
</style>

gli stili sono racchiusi dentro due parentesi graffe { } 

Per approfondimenti consiglio la lettura di questo articolo:
https://nicholasmarmonti.com/tutorial/media-queries-css/