Como substituir atributos HTML de largura e altura com CSS


Um dos elementos HTML que frequentemente entra em colisão com CSS é o img elemento. Como aprendemos em Solicitar Métricas Corrigindo Problemas de Mudança de Structure Cumulativa no DavidWalshBlog artigo, fornecendo dimensões de imagem dentro do picture tag ajudará a melhorar a pontuação do seu web site. Mas em um mundo onde o design responsivo é rei, precisamos que CSS e HTML trabalhem juntos.

A maioria dos ajustes de estilo de design responsivo são feitos por meio de max-width valores, mas quando você fornece um top valor para sua imagem, você pode obter uma imagem distorcida. O objetivo deve ser sempre exibir imagens em dimensões relativas. Então, como garantimos a top atributo não entra em conflito com max-width valores?

A resposta é tão fácil quanto 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;
}

A dança para agradar usuários e 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 este código para otimizar para usuários e mecanismos de busca!

  • Menu de inversão 3D animado com CSS
  • 5 maneiras pelas quais CSS e JavaScript interagem que você talvez não conheça
  • Demonstrações favoritas do CodePen de Chris Coyier

    David me perguntou se eu toparia um visitor publish escolhendo algumas das minhas canetas favoritas da CodePen. Uma tarefa assustadora! São tantas! Mas consegui escolher algumas que me deixaram impressionado nos últimos meses. Se você…

  • Raspador PHP IMDB

    Já faz um bom tempo desde que escrevi um PHP grabber e a coceira finalmente me pegou. Desta vez, a vítima é o Worldwide Film Database, também conhecido como IMDB. O IMDB tem informações sobre todos os filmes já feitos (ou assim parece). O…


Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *