O tamanho das imagens na página da web parece ser o mesmo. Nas páginas de artigo mais comuns com várias imagens, o tamanho da imagem geralmente é o mesmo que a largura da página. Dessa forma, a página parece uma forma cilíndrica reta. Se você vir muito desse layout, se sentirá muito monótono. Eu acho que essa situação se deve em grande parte às limitações dos navegadores à moda antiga. No entanto, com a popularidade dos navegadores modernos (Firefox/Google/IE11), os navegadores têm cada vez menos restrições no design da página, e a imaginação dos programadores da Web pode ser bastante exercida.
Por exemplo, Leng Zhi: Você sabe como é o [x] que todas as janelas vieram? Neste artigo, muitas fotos excedem o limite de largura do texto, dando às pessoas uma sensação de impressionante e impressionante. Ao mesmo tempo, imagens grandes são exibidas em seu tamanho real, dando às pessoas uma sensação mais chocante.
Mas tecnicamente, podemos limitar facilmente as imagens com a largura máxima do texto, para que todas elas mantenham uma largura e, quando não seguimos a largura do texto, precisamos do tamanho de cada imagem. Podemos declarar o tamanho original da imagem ao editar no servidor. Uma maneira mais flexível é obter dinamicamente o tamanho original da imagem, colocando um pedaço de JS na página e alterar dinamicamente o tamanho da exibição da imagem. Isso é compatível com a largura máxima do texto antigo e também pode fazer com que a imagem pareça o tamanho original quando necessário.
Como obter o tamanho original da imagem no lado do navegador usando JavaScript?
A cópia do código é a seguinte:
var iMg = $ ("#img_id"); // pegue meu img elem
var pic_real_width, pic_real_height;
$ ("<img/>") // Faça cópia da imagem para evitar problemas de CSS
.attr ("src", $ (img) .attr ("src")))
.load (function () {
pic_real_width = this.width; // Nota: $ (this) .width () não vai
pic_real_height = this.Height; // funciona para imagens de memória.
});
O navegador Webkit (Google Chrome, etc.) pode obter apenas valores de altura e largura após o evento carregado da imagem. Portanto, você não pode usar a função de tempo limite para aguardar o atraso, a melhor maneira é usar o evento Onload da imagem.
Para evitar o impacto do CSS no tamanho da imagem, o código acima copia a imagem para a memória para o cálculo.
Se sua página for uma página antiquada, você poderá incorporar esse código na parte inferior da página, conforme necessário, e ela não exige que você modifique a página original.