Como substituir os atributos HTML de largura e altura com CSS

Um dos elementos HTML que frequentemente entra em conflito com o CSS é o atributo img . Como aprendemos em Problemas de correção de deslocamento cumulativo de layout do Request Metrics no DavidWalshBlog fornecendo as dimensões da imagem na seção image ajudará a melhorar a pontuação do seu site. Mas em um mundo em que o design responsivo é rei, precisamos que o CSS e o HTML trabalhem juntos.

A maioria dos ajustes de estilo do design responsivo é feita por meio de max-width mas quando o senhor fornece um height à sua imagem, o senhor pode obter uma imagem distorcida. O objetivo deve ser sempre exibir imagens em dimensões relativas. Então, como podemos garantir que o height não entre em conflito com o atributo max-width valores?

A resposta é tão fácil quanto height: auto!

/* assuming any media query */
img {
  /* Ensure the image doesn't go offscreen */
  max-width: 500px;
  /* Ensure the image height is responsive regardless of HTML attribute */
  height: auto;
}

A dança para agradar aos usuários e aos mecanismos de busca é sempre um equilíbrio divertido. CSS e HTML nunca foram feitos para entrar em conflito, mas em alguns casos eles entram. Use esse código para otimizar tanto para os usuários quanto para os mecanismos de pesquisa!