Existem APIs ou métodos JavaScript ou jQuery para obter as dimensões de uma imagem na página?
javascript
jquery
image
jquery-plugins
Saneef
fonte
fonte
Respostas:
Você pode obter programaticamente a imagem e verificar as dimensões usando Javascript ...
Isso pode ser útil se a imagem não fizer parte da marcação.
fonte
clientWidth e clientHeight são propriedades DOM que mostram o tamanho atual no navegador das dimensões internas de um elemento DOM (excluindo margem e borda). Portanto, no caso de um elemento IMG, isso obterá as dimensões reais da imagem visível.
fonte
$.fn.width
e$.fn.height
.document.getElementById
é mais longo para digitar, mas 10 vezes mais rápido que$('#...')[0]
.Além disso (além das respostas de Rex e Ian), há:
e
Eles fornecem a altura e a largura do próprio arquivo de imagem (e não apenas o elemento da imagem).
fonte
Se você estiver usando o jQuery e solicitando tamanhos de imagem, terá que esperar até que eles sejam carregados ou você receberá apenas zeros.
fonte
Eu acho que uma atualização para essas respostas é útil porque uma das respostas mais votadas sugere o uso de
clientWidth
clientHeight, que agora acho obsoleto.Fiz algumas experiências com o HTML5, para ver quais valores realmente são retornados.
Antes de tudo, usei um programa chamado Dash para obter uma visão geral da API da imagem. Ele afirma que
height
ewidth
são a altura / largura renderizada da imagem e quenaturalHeight
enaturalWidth
são a altura / largura intrínseca da imagem (e são apenas HTML5).Usei uma imagem de uma linda borboleta, de um arquivo com altura 300 e largura 400. E esse Javascript:
Então eu usei esse HTML, com CSS embutido para altura e largura.
Resultados:
Alterei o HTML para o seguinte:
ou seja, usando atributos de altura e largura em vez de estilos embutidos
Resultados:
Alterei o HTML para o seguinte:
ou seja, usando atributos e CSS, para ver o que tem precedência.
Resultados:
fonte
Usando o JQuery, você faz isso:
fonte
width
eheight
doimg
elemento.O que todos os outros esqueceram é que você não pode verificar o tamanho da imagem antes de carregá-la. Quando o autor verifica todos os métodos publicados, provavelmente funcionará apenas no host local. Como o jQuery pode ser usado aqui, lembre-se de que o evento 'ready' é acionado antes do carregamento das imagens. $ ('# xxx'). width () e .height () devem ser disparados no evento onload ou posterior.
fonte
Você realmente pode fazer isso usando um retorno de chamada do evento load, pois o tamanho da imagem não é conhecido até que o carregamento seja realmente concluído. Algo como o código abaixo ...
fonte
Com jQuery biblioteca-
Use
.width()
e.height()
.Mais em largura jQuery e altura jQuery .
Código de exemplo
fonte
ok pessoal, acho que aprimorei o código-fonte para poder deixar a imagem carregar antes de tentar descobrir suas propriedades, caso contrário, ele exibirá '0 * 0', porque a próxima instrução teria sido chamada antes do carregamento do arquivo o navegador. Requer jquery ...
fonte
Supondo que queremos obter as dimensões da imagem de
<img id="an-img" src"...">
Dimensões naturais
el.naturalWidth
eel.naturalHeight
nos dará as dimensões naturais , as dimensões do arquivo de imagem.Dimensões do layout
el.offsetWidth
eel.offsetHeight
obterá as dimensões nas quais o elemento é renderizado no documento.fonte
Antes de usar o tamanho real da imagem, você deve carregar a imagem de origem. Se você usa a estrutura JQuery, pode obter o tamanho real da imagem de maneira simples.
fonte
Esta resposta foi exatamente o que eu estava procurando (no jQuery):
fonte
Você pode ter uma função simples como a seguinte (
imageDimensions()
) se não tem medo de usar promessas .fonte
Resposta JQuery:
fonte
Achei que isso poderia ser útil para alguns que estão usando Javascript e / ou texto datilografado em 2019.
Achei o seguinte, como alguns sugeriram, incorreto:
Isto está correto:
Conclusão:
Use
img
, nãothis
, emonload
função.fonte
Recentemente, tive o mesmo problema por um erro no controle deslizante flexível. A altura da primeira imagem foi ajustada menor devido ao atraso no carregamento. Tentei o seguinte método para resolver esse problema e ele funcionou.
Isso fornecerá a altura em relação à largura definida em vez da largura original ou Zero.
fonte
Você também pode usar:
fonte
Nicky De Maeyer perguntou após uma imagem de fundo; Eu simplesmente o pego no css e substituo o "url ()":
fonte
s.substr(4,s.length-5)
, é, pelo menos, mais fácil sobre os olhos;)Você pode aplicar a propriedade onload handler quando a página carregar em js ou jquery desta forma: -
fonte
Simplesmente, você pode testar assim.
fonte
fonte
é importante remover a configuração interpretada pelo navegador da div pai. Então, se você quiser a largura e a altura reais da imagem, basta usar
Este é um exemplo do projeto TYPO3, onde preciso das propriedades reais da imagem para dimensioná-la com a relação correta.
fonte
Este é o meu método, espero que seja útil. :)
fonte
este trabalho para visualização e upload de várias imagens. se você precisar selecionar para cada uma das imagens uma a uma. Em seguida, copie e cole em toda a função de visualização da imagem e valide !!!
fonte
Antes de adquirir os atributos do elemento, a página do documento deve estar onload:
fonte
basta passar o objeto img que é obtido pelo elemento input quando selecionamos o arquivo correto, ele fornecerá a altura e a largura netural da imagem
fonte