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
Potenziare Azure AI Search con la ricerca vettoriale
Sostituire la GitHub Action di login su private registry
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Implementare l'infinite scroll con QuickGrid in Blazor Server
Miglioramenti nell'accessibilità con Angular CDK
Verificare la provenienza di un commit tramite le GitHub Actions
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Gestire i null nelle reactive form tipizzate di Angular
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare Tailwind CSS all'interno di React: primi componenti
Routing statico e PreRendering in una Blazor Web App
Installare le Web App site extension tramite una pipeline di Azure DevOps