Estou me aproveitando de um sistema de galerias que achei na web onde, dependendo da proximidade da imagem do mouse, ele amplia proporcionalmente.
Link: Galeria de imagens
Bom, adaptei o código para ser responsivo (e como podem ver está em construção) e não há nenhum problema aparente. O meu problema começa quando se muda a resolução (seja usando o zoom do navegador, seja 'girando' o tablet ou celular). Ao passar o mouse ou clicar (com touchs) em cima de qualquer imagem, na sua resolução cuja página foi carregada, com a descrição nada acontece, mas quando se dá um pequeno zoom, já é possível ver todo o desalinhamento da descrição com as imagens. A altura da imagem é igual à largura. A largura é relativa.
Imaginei uma única solução para meu problema: usar jQuery. Programo com um nível básico - intermediário nesse framework e consigo fazer boas coisas. Mas não faço ideia de como, ao alterar a resolução, alterar o tamanho da descrição automaticamente. Até o momento, uso esse código para deixar ambos iguais:
$(document).ready(function(){
$(".gallery-description").height( $(".gallery-thumbs li a img").height());
})
Espero que alguém possa me ajudar melhorando a função ou dando outra sugestão! Obrigado. :)