Come sovrascrivere gli attributi HTML di larghezza e altezza con CSS

Uno degli elementi HTML che spesso entrano in collisione con CSS è il img elemento. Come abbiamo imparato in Richiedere i problemi di turno di format cumulativo di Metrics su Davidwalshblog Articolo, fornendo dimensioni dell’immagine all’interno del picture TAG contribuirà a migliorare il punteggio del tuo sito Net. Ma in un mondo in cui il design reattivo è re, abbiamo bisogno di CSS e HTML per lavorare insieme.

Le più reattive regolazioni dello stile di design vengono eseguite tramite max-width valori, ma quando fornisci un top Valore alla tua immagine, puoi ottenere un’immagine distorta. L’obiettivo dovrebbe essere sempre una visualizzazione di immagini in dimensioni relative. Quindi come possiamo garantire il top L’attributo non è in conflitto con max-width valori?

La risposta è facile come top: auto!

/* assuming any media question */
img {
  /* Make sure the picture would not go offscreen */
  max-width: 500px;
  /* Make sure the picture top is responsive no matter HTML attribute */
  top: auto;
}

La danza per soddisfare gli utenti e i motori di ricerca è sempre un equilibrio divertente. CSS e HTML non sono mai stati pensati per essere in conflitto, ma in alcuni casi lo fanno. Usa questo codice per ottimizzare sia per gli utenti che per i motori di ricerca!