6

Estou criando um mural de imagens dentro de thumbnails ajustando-as automaticamente, onde eu uso o cálculo abaixo:

if($('.thumb img').width()<$('.thumb img').height()){//portrait

  $('.thumb img').css({
    maxWidth:'100%'
  });
  $('.thumb img').css({
    marginTop:-(($('.thumb img').height()-$('.thumb').height())/2)
  });
}else{//landscape
  $('.thumb img').css({
    maxHeight:'100%'
  });
  $('.thumb img').css({
    marginLeft:-(($('.thumb img').width()-$('.thumb').width())/2)
  });
}

Se eu tenho penas uma imagem, ele calcula bem, mas quando tenho imagens de tamanhos diferentes ele encontra um bug. Queria saber se há uma forma de eu executar essa função a cada vez que encontrar uma div com a class .thumb, pois assim posso tratar imagem por imagem e estruturar elas dentro das suas div's específicas.

3 Respostas 3

5

Para executar determinada função para cada elemento usa-se:

$('.thumb img').each(function(){
if($(this).width()<$(this).height()){//portrait

 $(this).css({
    maxWidth:'100%'
  });
  $(this).css({
    marginTop:-(($(this).height()-$('.thumb').height())/2)
  });
}else{//landscape
  $(this).css({
    maxHeight:'100%'
  });
  $(this).css({
    marginLeft:-(($(this).width()-$('.thumb').width())/2)
  });
}
});

Repare que dentro do metodo each todas as referencias a class .thumb e o elemento img, foram trocadas por $(this), nesse caso o this aponta para o elemento que está sendo percorrido.

7
  • Faltou trocar as referências a $('.thumb').
    – bfavaretto
    Commented 16/12/2013 às 16:53
  • 1
    o $('.thumb') , nao vai ser this pois estou rodando o loop diretamente nos elementos do tipo img que tem essa classe, e não só na classe. mas poderia ser feito também só na classe. mas meu entendimento da questão dizia que era só nessa situação especifica, me corrija se estiver errado porfavor.
    – Guerra
    Commented 16/12/2013 às 16:56
  • 1
    Maravilha, obrigado! tava começando a sentir cheiro de queimado aqui na sala rsrs... Valeu @Guerra Commented 16/12/2013 às 16:56
  • Sem problemas LeandroLUK, não se esqueça de marcar a resposta correta como "certa" para ajudar futuros usuários com a mesma dúvida.
    – Guerra
    Commented 16/12/2013 às 16:58
  • Só precisa ver certinho esse $('.thumb') ai porque se tiver mais de 1 elemento ele vai retornar um array e você não vai conseguir pegar o width ou height como quer, como vai funcionar? vai ser um elemento modelo?
    – Guerra
    Commented 16/12/2013 às 16:59
3

Você precisa de um loop:

$('.thumb img').each(function(){
    var img = $(this);
    var proporcao = img.width() / img.height();

    // Retrato
    if(proporcao > 1) {
        img.css({
            maxWidth:'100%',
            marginTop:-((img.height()-img.closest('.thumb').height())/2)
        });

    // Paisagem
    } else {
        img.css({
            maxHeight:'100%',
            marginLeft:-((img.width()-img.closest('.thumb').width())/2)
        });
    }
});
3

Uma função de jQuery para esse efeito é o .each() que permite executar um bloco de código por cada elemento localizado:

$('.thumb').each(function() {

   // o teu código aqui
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .