JavaScript redimensiona imagens dinamicamente

Um problema comum ao atualizar artigos em seu próprio site é que as ilustrações dos artigos são muito largas, distorcendo toda a página da web. Seria muito problemático dimensionar cada ilustração antes de inseri-la.

Encontrei esse tipo de coisa em um artigo que escrevi há algum tempo. Mais tarde, usei as propriedades CSS overflow e max-width para resolver temporariamente o problema de deformação da página. A vantagem deste método é que é simples, mas a desvantagem é que irá destruir o efeito de alguns detalhes.

Por exemplo, overflow:hidden significa que quando a largura do elemento interno é maior que o quadro pai, o excesso de largura fica oculto. Fazer isso pode fazer com que algum conteúdo seja cortado e ocultado repentinamente, o que é uma pena para o público.

Se você limitar a largura máxima das ilustrações dos artigos através do atributo max-width, será necessário considerar a compatibilidade de cada navegador. O IE6 não suporta este atributo, embora alguns navegadores suportem este atributo, as imagens não são dimensionadas proporcionalmente (parece ser Safari e Opera, não me lembro claramente, se isso for feito, será prejudicial). para os usuários desses navegadores. Muito injusto.

Portanto, o que finalmente escolhi foi alterar dinamicamente o tamanho da imagem através de JavaScript. Este método tem boa compatibilidade com vários navegadores (poucas pessoas desabilitariam o JavaScript hoje em dia, certo?), e se o tema for alterado, o tamanho máximo das ilustrações do artigo também pode ser alterado de forma flexível.

Existem duas soluções, como o tema que estou usando é carregado com a biblioteca jQuery, ele pode ser implementado com o seguinte código:

$ ( documento ) pronto ( função ( ) {.
 $ ( '.post img' ) cada ( função ( ) {.
 var maxWidth = 100 ; // Largura máxima da imagem
 var maxHeight = 100 ; // Altura máxima da imagem
 var proporção = 0 ; // proporção de escala
 var width = $ ( this ) width ( ) ; /largura real da imagem.
 var height = $ ( this ) . height ( ) ;

 // Verifica se a imagem é super larga
 if ( largura > maxLargura ) {
 ratio = maxWidth / width ; // Calcula a proporção de escala
 $ ( this ) .css ( "width" , maxWidth ) ; // Define a largura real da exibição;
 height = height * ratio ; // Calcula a altura após escala igual
 $ ( this ) .css ( "height" , height * ratio ) ; // Define a altura após o dimensionamento proporcional;
 }

 // Verifica se a imagem é super alta
 if ( altura > alturamáx ) {
 ratio = maxHeight / height ; // Calcula a proporção de escala
 $ ( this ) .css ( "height" , maxHeight ) ; // Define a altura real da exibição.
 width = width * ratio ; // Calcula a altura após escala igual
 $ ( this ) .css ( "width" , width * ratio ) // Define a altura após o dimensionamento proporcional ;
 }
 } ) ;
 } ) ;

Se não quiser carregar a biblioteca jQuery, você pode usar o seguinte código:

 função ResizeImage ( imagem , largura máxima da ilustração , altura máxima da ilustração )
 {
 if ( imagem.className == "Miniatura" )
 {
 w = imagem.largura ;
 h = imagem.altura ;

 se ( w == 0 || h == 0 )
 {
 imagem.largura = largura máxima ;
 imagem.altura = altura máxima ;
 }
 senão se ( w > h )
 {
 if ( w > maxwidth ) imagem.width = maxwidth ;
 }
 outro
 {
 if ( h > altura máxima ) imagem altura = altura máxima ;
 }

 image.className = "ScaledThumbnail" ;
 }
 }

Usar JavaScript puro é um pouco mais problemático, pois você precisa adicionar manualmente class="Thumbnail" à imagem, mas o efeito final é o mesmo.

Texto original: ajuste dinamicamente o tamanho da imagem

Obrigado bolo pela sua contribuição