Foto responsive in Wordpress con css personalizzato


Nei giorni scorsi ho impostato il fido AV Bot per fare in modo che tutte le volte che condivido una foto sul mio profilo Instagram compaia sul nella sezione Fotoblog un nuovo articolo contenente la foto stessa e il relativo commento su Instagram.

Detto fatto, ha funzionato, però ho notato che le foto importate da Instagram – a differenza di tutte le altre foto inserite negli articoli – non erano responsive ovvero non si adattavano automaticamente alle dimensioni della finestra del browser. Leggendo il blog da smartphone si vedeva solo una parte della foto.

Ho indagato, mi sono documentato e ho trovato una soluzione. Per rendere responsive le foto importate da Instagram, è più in generale tutte le immagini del blog, ho aggiunto questo codice nello stile css personalizzato del sito:

img
{
  max-width: 100% !important;
  height: auto;
  vertical-align: middle;
  border-top-width: 0px;
  border-right-width-value: 0px;
  border-bottom-width: 0px;
  border-left-width-value: 0px;
  border-top-style: none;
  border-right-style-value: none;
  border-bottom-style: none;
  border-left-style-value: none;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
}