Escala HTML img

114

Estou tentando exibir algumas imagens grandes com tags HTML img. No momento, eles saem da borda da tela; como posso escalá-los para permanecer na janela do navegador?

Ou, na eventualidade de isso não ser possível, é possível dizer pelo menos "exibir esta imagem em 50% de sua largura e altura normais"?

Os atributos de largura e altura distorcem a imagem - pelo que eu posso dizer, isso ocorre porque eles se referem a quaisquer atributos que o contêiner possa ter, que não estarão relacionados à imagem. Não posso especificar pixels porque tenho que lidar com uma grande coleção de imagens, cada uma com um tamanho de pixel diferente. A largura máxima não funciona.

html image-scaling Rwallace
fonte
4
Lembre-se de que não é recomendável enviar imagens grandes e diminuí-las com css. É melhor ter versões diferentes da mesma imagem para economizar largura de banda e tornar a página mais responsiva (mesmo que a imagem pareça pequena, a imagem completa será enviada).
Esteban Küber
1
rwallace, você está usando .net ou PHP ou algo diferente de HTML puro?
Dorjan
1
O tamanho do arquivo de imagem não importa, não há nenhum requisito no caso de eu estar pensando em ser econômico com largura de banda. Estou usando PHP, mas a solução HTML funciona.
rwallace

Respostas:

135

Defina apenas o widthou height, e o outro será dimensionado automaticamente. E sim, você pode usar uma porcentagem.

A primeira parte pode ser feita, mas requer JavaScript, portanto, pode não funcionar para todos os usuários.

RiddlerDev
fonte
7
Por favor, observe que fazer isso em imagens enormes resultará em longos tempos de download para páginas que não deveriam ter muito tempo de download. É sempre melhor redimensionar a imagem, se possível.
ceejayoz
Obrigado! Acontece que sua solução de apenas definir a largura não só funciona para o dimensionamento correto, mas também faz a primeira parte apenas definindo a largura para 100%.
rwallace
2
@ceejayoz eu concordo, mas não é isso que ele está perguntando.
RiddlerDev
@ceejayoz Estou me perguntando, por que demora mais? Não é necessário redimensionar quando é exibido para ambas as situações? Ou você está dizendo para redimensionar manualmente a imagem real e alterar o arquivo?
Abdul
2
@Abdul Estou dizendo que uma imagem de 5 MB de 3.000 x 3.000 pixels não deve ser usada em um slot de 100 x 100 pixels em seu site.
ceejayoz
18

css é o suficiente:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
Selvadurai Handeeban
fonte
9

Eu sei que esta pergunta foi feita há muito tempo, mas a partir de hoje uma resposta simples é:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

O uso de vw aqui indica que a largura é relativa a 55% da largura da janela de visualização.

Todos os principais navegadores hoje em dia suportam isso.

Verifique este link .

Dimitri de Jesus
fonte
1
vwfoi um salva-vidas para mim, os outros métodos não funcionaram para a imagem em questão.
caram
6

Não é necessário Javascript.

IE6 Internet Explorer 6

Porcentagem funciona apenas para a largura de um elemento, mas height:100%;não funciona sem o código correto.

CSS

html, body { height:100%; }

Então, o uso de uma porcentagem funciona corretamente e é atualizado dinamicamente no redimensionamento da janela.

<img src="image.jpg" style="height:80%;">

Você não precisa de um atributo de largura, a largura é dimensionada proporcionalmente à medida que o tamanho da janela do navegador é alterado.

E esta pequena joia, caso a imagem seja ampliada, ela não ficará (excessivamente) em blocos (ela interpola).

img { -ms-interpolation-mode: bicubic; }

Os adereços vão para esta fonte: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

não identificado-1
fonte
6

Adicionar max-width: 100%;à imgtag funciona para mim.

Ralph David Abernathy
fonte
2

Acho que a melhor solução é redimensionar as imagens via script ou localmente e fazer o upload novamente. Lembre-se de que você está forçando seus visualizadores a baixar arquivos maiores do que precisam

riotera
fonte
0

A melhor maneira que conheço de fazer isso é:

1) defina o estouro para rolar e dessa forma a imagem permaneceria, mas você pode rolar para vê-la

2) faça upload de uma imagem menor. Agora, há uma abundância de programas por aí durante o upload (você precisará de algo como PHP ou .net para fazer isso btw), você pode fazer com que seja escalonado automaticamente.

3) Vivendo com ele e definindo a largura e altura, embora isso fará com que pareça distorcido, mas o tamanho certo ainda fará com que o usuário tenha que baixar a imagem em tamanho real.

Boa sorte!

Dorjan
fonte