WordPress assegna delle classi CSS predefinite alle immagini dei nostri post. In questo articolo vedremo come sfruttare queste classi per assegnare degli stili specifici alle immagini.
Allineamento
Le classi CSS per l'allineamento delle immagini sono le seguenti:
.alignnone.aligncenter.alignright.alignleft
Possiamo sfruttare la cascata per assegnare alle immagini degli stili più specifici relativi alle classi in uso:
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
margin: 12px 24px 12px 0;
margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
margin: 12px 0 12px 24px;
margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
margin-top: 12px;
margin-top: 0.857142857rem;
margin-bottom: 12px;
margin-bottom: 0.857142857rem;
}
Dimensioni
Le classi CSS che regolano le dimensioni delle immagini sono le seguenti:
.size-full.size-large.size-medium.size-thumbnail
Ecco degli stili di esempio:
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
max-width: 100%;
height: auto;
}
img.size-medium {
width: 250px;
height: 150px;
}
img.size-thumbnail {
width: 100px;
height: 100px;
}
Come si può notare risulta estremamente semplice assegnare degli stili specifici una volta conosciuta la gerarchia e la funzione di queste classi CSS.