Imagens responsivas facilitadas com o ResponsifyJS

A web moderna deve ser 100% responsiva e as bibliotecas mais novas estão tornando isso cada vez mais possível.

Com plugins gratuitos, como ResponsifyJS, é ainda mais fácil conseguir que seus sites funcionem em todos os dispositivos. este plugin jQuery gratuito leva um recipiente de imagens e dinamicamente reorganiza-los com base em vários tamanhos de tela.

Desde contêineres diferentes mantenha as imagens de maneira diferente, eles podem redimensionar de maneiras muito estranhas. Às vezes, você tem fotos de pessoas e seus rostos podem ser cortados quando redimensionados no celular.

O plugin Responsify foi criado para resolver esse problema exato. Pode funcionar automaticamente, mas a verdadeira magia está em definindo sua própria área de foco na figura.

Ele usa um sistema interno de descrições decimais para encontrar onde o foco da imagem deve estar. Por exemplo, você pode definir posições tal como data-focus-top qual “blocos em” um determinado segmento da imagem.

Esses dados precisam ser passados na forma de decimais, por exemplo, um alvo decimal de 0,5% da imagem (esquerda / direita ou superior / inferior). Naturalmente, isso é muito confuso de se fazer sozinho. Mas há um aplicativo gratuito Responsify que te permite calcular as posições dinamicamente no seu navegador.

Basta enviar uma foto, definir a área de foco e copiar / colar o código da imagem no site. O plugin Responsify terá todos os dados necessários para redimensionar corretamente a imagem em telas menores.

Você pode encontrar alguns links de demonstração ao vivo no repositório do GitHub, incluindo trechos de código para copiar / colar em seu site.

Este plugin não é a solução perfeita para todos os projetos. Às vezes você vai quer imagens para redimensionar sem áreas de foco fixas. Mas, se você estiver usando grades de alvenaria com jQuery não faz mal adicionar o ResponsifyJS à sua pilha.

Para saber mais, visite a página inicial do plug-in para uma demonstração ao vivo, um link de download e um guia completo de configuração.