Costruendo siti con design responsive, sappiamo che una delle cose più difficili da realizzare è legato alla dimensione delle immagini.
Bootstrap ci viene in aiuto utilizzando una classe chiamata img-responsive, che applicherà max-width:100% e height:auto all'immagine, consentendole di adattarsi in caso lo spazio disponibile sullo schermo sia minore di quello dell'immagine, che non uscirà più dai confini dello schermo:
<img src="myimage.png" class="img-responsive" />
L'uso di questa classe è consigliata quando le immagini arrivano da un CMS e non possiamo controllarne direttamente le dimensioni. Un buon design responsive, invece, deve già prevedere che gli elementi che hanno bisogno di scalare ed adattarsi abbiano strategie ben definite e esplicitate all'interno del nostro CSS.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Azure AI Studio per testare i modelli AI
Usare lo spread operator con i collection initializer in C#
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Evitare la script injection nelle GitHub Actions
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Effettuare il binding di date in Blazor
Usare le collection expression per inizializzare una lista di oggetti in C#
Limitare le richieste lato server con l'interactive routing di Blazor 8
Eseguire attività basate su eventi con Azure Container Jobs
Aggiungere interattività lato server in Blazor 8
Utilizzare gRPC su App Service di Azure