O cenário é conhecido: o site fictício Jornaloso.Com faz uma matéria sobre enchentes, e bota uma foto em formado "paisagem" (1000 pixels de largura por 600 de altura). Ela exibe perfeitamente na capa do site, que tem uma "manchete" acompanhada de uma imagem. Porque lá na capa, foi definido o tamanho 500X350 para a imagem, e a foto da enchente fica bonitinha.

Só que daí o Jornaloso entrevista a socialite Maria Rica, e ela insiste em aparecer em uma foto no formato "retrato", ou "em pé", que tem 700 pixels de largura por 1000 de altura. Pronto. Vai sair deformada na capa.

Ou não.

Vamos ver agora como fazer isso funcionar.

A PRIMEIRA COISA: OVERFLOW

O primeiro passo é extremamente simples, e requer conhecimentos rudimentares de CSS. Lá na capa do site, vamos usar uma DIV para conter a foto que vamos exibir. Esta DIV terá um atributo "overflow" definido para "hidden". Ou seja, vamos definir uma altura e largura para a DIV, e qualquer coisa que ultrapasse o tamanho dela sumirá.

O problema com o código acima é que, se temos uma foto de 700x1000, como é o caso, e o espaço é de 500x350, o resultado final será um corte "de canto" da imagem.

Uma solução possível, ainda sem usar NADA de PHP ou de outra coisa qualquer que não seja CSS e HTML, é forçar uma largura para a foto. Isso resolve mais ou menos bem o problema para imagens "em pé", porque normalmente veremos a parte de cima dessas imagens.

Só que, quando colocamos imagens "deitadas", elas ficarão parecendo aqueles filmes gravados para cinema e exibidos na TV de tubo: uma imagem com faixas pretas em cima e embaixo (claro, a cor dessas faixas, podemos definir adicionando um atributo "background" à DIV).

Fora isso, temos outro problema: em muitas fotos "em pé", de pessoas, a caixa exibirá o topo da cabeça do retratado.

Caso optemos por definir um "max-height" e um "max-width" para todas as imagens, então as imagens "em pé" ficarão com espaço ao redor, e as imagens "deitadas" ficarão com espaço no alto e abaixo. É um saco. O ideal seria termos a imagem preenchendo o campo, e a DIV exibindo o centro da imagem, na pior hipótese.

A SEGUNDA COISA: CENTRALIZANDO

Agora vamos ter que usar um pouquinho de PHP. Mais especificamente, a função "getimagesize", que nos dá duas informações muito importantes: a altura e a largura da imagem. Usando logo depois um "if", podemos ter dois modos de redimensionamento: um para imagens "em pé" e outro para imagens "deitadas".

Agora, olhe o código acima. Dentro do IF é que está o pulo do gato: a largura de exibição já foi calculada, usando como base a imagem já "redimensionada" para a altura de 350 pixels. Bom. Caso a lagura seja maior do que 500 (ou seja, estamos lidando com uma imagem mais "comprida" do que "alta"), então, surge a variável $margem.

Esta variável terá como valor a nova largura da imagem, MENOS a largura do painel, dividido por dois. Isso quer dizer que, se a imagem ia ter 700 pixels de largura, menos 500, dá 200, e $margem terá 100. Quando formos exibir a imagem larga dentro da DIV com overflow, portanto, teremos um corte de 100 pixels à direita, e 100 pixels à esquerda, centralizando esta imagem.

Dentro o DIV que tem overflow, eu crio OUTRO div, com position ABSOLUTE (ou seja, uma posição absoluta em relação ao DIV "pai", aquele com overflow). E neste DIV de posição absolute, eu defino um atributo LEFT, ou seja, uma posição dele à esquerda, tendo como ponto ZERO a margem esquerda do DIV pai, aquele do overflow. Como eu tinha definido o valor de $margem como um número negativo, isso vai "puxar" o canto esquerdo do DIV absolute para fora da área exibida pelo DIV dentro do qual ele está. Como estamos falando de um DIV com "overflow: hidden", este canto será "cortado". E o centro da imagem será exibido.

Bom.

Neste meu exemplo, o ELSE, ou seja, a subrotina que trata de imagens "em pé" é bem mais simples e não tem toda essa complicação de margens calculadas. É que, quando eu exibo uma foto vertical, eu vou deixar os cantos vazios ao redor dela. Mas é possível, caso alguém queira, fazer o mesmo procedimento das fotos "deitadas", definindo a largura da imagem (widh) para 500 e fazendo o corte (com uma DIV absolute), usando um cálculo de margem quase igual, mas centrado na altura, e cortando o topo e o pé da foto (ao invés de definir "left", define-se "top").

Só que, daí, há o risco de, em uma foto de pessoa, cortarmos a cabeça e as pernas, e exibir a barriga do fotografado. Nunca fica 100% bom. Melhor deixar as fotos "em pé" com cantos pretos ou coisa assim. Falo por experiência. Mas sintam-se livres.