Object-fit: ridimensionare le immagini ma mantenendo l’aspect ratio in CSS

Svariate volte mi sono chiesto come emulare il comportamento di background-size: cover; ma con un’immagine semplice e non con uno sfondo; Esistono a tal proposito vari work-around che possono venirci in soccorso ma una soluzione semplice e concisa sarebbe l’ideale.

Ecco che ci arriva in soccorso object-fit:

img {
    height: 200px;
    width: 200px;
    object-fit: cover;
}

Con queste poche linee di codice anche se avessimo un’immagine con delle proporzioni diverse, l’aspetto verrà mantenuto ma l’immagine verrà automaticamente tagliata e riempirà le dimensioni che gli abbiamo assegnato, esattamente come succede negli sfondi assegnando la proprietà background-size: cover.

A object-fit è possibile assegnare anche altri valori oltre a cover tra cui contain (che mostra tutta l’immagine con le proporzioni esatte) e fill (che al contrario stretcha l’immagine fino a riempire totalmente le dimensioni che abbiamo assegnato).

Il supporto di object-fit non è però eccezionale:
Chrome e Opera lo supportano ormai da tempo, firefox dalla versione 36, Android Browser solo dalla versione 4.4.4 ed IOS Safari lo supporta parzialmente dalla versione 7.1 in poi.

Ovviamente Internet Explorer non ci delude mai (ironico) non avendo nessun tipo di support nemmeno nella versione 11.

Follie HTML & CSS 2: Il Box Model

Questa serie include dei rapidi e semplici consigli su dei problemi che prima o poi capitano a tutti i web designer.

Perchè se io imposto nei CSS la width di un div a 200px quando poi vado a controllare è di 220px? Magari semplicemente perchè è stato impostato un padding di 10px!
Proprio così, di default i css sommano bordi e padding alla dimensione dichiarata, il che non è un grossissimo problema se lavoriamo con misure fisse, dalle quali è possibile sottrarre la dimensione del border e del padding ma se utilizzassimo ad esempio una percentuale come larghezza o altezza?

*, *:before, *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

Questa è la soluzione, impostando il valore border-box per il parametro box-sizing indichiamo al browser che la dimensione che noi dichiariamo per un elemento dev’essere riferita all’elemento nella sua interezza, i border e il padding verranno dunque sottratti alla dimensione da noi specificata automaticamente.

Follie HTML & CSS 1: Dichiarazione del Doctype

Questa serie include dei rapidi e semplici consigli su dei problemi che prima o poi capitano a tutti i web designer.

È necessario includere sempre il doctype all’inizio di qualsiasi file HTML, la versione più semplice, rapida e che consiglio, è quella introdotta con HTML 5:

<!DOCTYPE html>

Mentre quella utilizzata per molto tempo di XHTML1 è

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Omettere il doctype può causare problemi con tabelle, inputs o altri elementi deformati.

Allineare verticalmente un div di cui non conosciamo l’altezza in CSS

Per molto tempo è esistito il problema di allineare verticalmente un qualsiasi elemento HTML di cui non conosciamo l’altezza.
Per nostra fortuna sta iniziando ad essere maggiormente supportato Flexbox che ci permetterà di giocare maggiormente con gli allineamenti ma, nel frattempo, sono sufficienti 3 (e dico TRE) righe di CSS (esclusi i prefissi) per allineare qualsiasi elemento, anche di cui non sappiamo l’altezza, in CSS:

.centrato_verticalmente {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
}

La cosa assolutamente favolosa è che è supportato da praticamente tutti i browser attualmente utilizzati (e con questo intendo anche Internet Explorer 9, per l’8 nulla da fare).
Ora andate e centrateli tutti!

Video background cover in HTML5 e CSS

In circolazione ci sono vari script Javascript o jQuery che permettono di impostare un video HTML5 come sfondo fullscreen ma, in realtà, è possibile raggiungere tale obbiettivo anche con poche righe di codice CSS.

Prima di tutto inseriamo all’interno della nostra pagina il markup del video:

<video class="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
   <source src="video.webm" type="video/webm">
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogv" type="video/ogg ogv">
   Video not supported
</video>

Ed ora è necessario un piccolo compromesso, dobbiamo infatti scegliere dove “ancorare” il video, ossia il punto che sarà sempre visibile (mentre il resto del video verrà nascosto nel caso in cui l’aspect ratio dello schermo fosse diverso da quello del video), nel codice d’esempio abbiamo scelto l’angolo in basso a destra (bottom: 0; right: 0;).

.video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

Il trick sta nell’impostare la larghezza e l’altezza come “auto” e min-width e min-height come “100%”, fondamentalmente stiamo forzando il browser ad avere sempre almeno il 100% del video visibile, l’eccedenza verrà poi nascosta impostando l’overflow “hidden”; impostando poi z-index a “-1000” ci assicuriamo che il video sia sotto i contenuti della pagina, ed ecco ottenuto il video fullscreen come sfondo!