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
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Assegnare un valore di default a un parametro di una lambda in C#
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Gestire undefined e partial nelle reactive forms di Angular
Utilizzare Tailwind CSS all'interno di React: primi componenti
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Eseguire query verso tipi non mappati in Entity Framework Core
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
I più letti di oggi
- Impostare un elemento come ridimensionabile tramite CSS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Personalizzare l'errore del rate limiting middleware in ASP.NET Core
- Accedere alla console di una Azure Container App
- Modificare i metadati nell'head dell'HTML di una Blazor Web App
- Gli oggetti CallOut di Expression Blend 4.0
- SQL Server 2005 December CTP
- Sfruttare le nuove tipologie di input di HTML5 con ASP.NET 4.0
- Upload da una pagina web con Dundas Upload