Como posso redimensionar uma imagem dinamicamente com CSS conforme a largura / altura do navegador muda?

107

Gostaria de saber como eu poderia redimensionar uma imagem junto com a janela do navegador, aqui está o que fiz até agora (ou baixar o site inteiro em um ZIP ).

Isso funciona bem no Firefox, mas tem problemas no Chrome: a imagem nem sempre é redimensionada, de alguma forma depende do tamanho da janela quando a página foi carregada.

Isso também funciona bem no Safari, mas às vezes a imagem é carregada com sua largura / altura mínima. Talvez isso seja causado pelo tamanho da imagem, não tenho certeza. (Se carregar bem, tente atualizar várias vezes para ver o bug.)

Alguma ideia de como eu poderia tornar isso mais à prova de balas? (Se o JavaScript for necessário, posso aceitar isso também, mas CSS é preferível.)

depi
fonte
Use consultas de mídia CSS3 ou o manipulador de eventos window.onresize do javascript. w3schools.com/jsref/event_onresize.asp
Shahid
Se você estiver usando bootstrap, adicione uma classe como esta class = "img-thumbnail". Isso é tudo para isso.
VivekDev

Respostas:

179

Isso pode ser feito com CSS puro e nem requer consultas de mídia.

Para tornar as imagens flexíveis, basta adicionar max-width:100%e height:auto. Imagem max-width:100%e height:autofunciona no IE7, mas não no IE8 (sim, outro bug estranho do IE). Para corrigir isso, você precisa adicionar width:auto\9para o IE8.

fonte: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

E se você quiser impor uma largura máxima fixa da imagem, basta colocá-la dentro de um contêiner, por exemplo:

<div style="max-width:500px;">
    <img src="..." />
</div>

Exemplo JSFiddle aqui . Não requer JavaScript. Funciona nas últimas versões do Chrome, Firefox e IE (que é tudo o que testei).

Kurt Schindler
fonte
Testei o link jsfiddle com o Opera 11 e com alguns Firefox recentes e, embora redimensione bem a imagem quando a janela encolhe, não o faz quando a janela cresce além de 650px
GDR
3
@GDR Eu não gostaria que a imagem crescesse além de seu tamanho original, ela apenas pixelaria e ficaria feia. Se você precisar aumentar o tamanho, comece com uma imagem maior.
Kurt Schindler
OK, então presumi incorretamente que esse é o ponto desta questão, desculpe.
GDR
2
Definir max-width como 100% e height como auto não fez nada para mim - eu realmente trabalhei com um contêiner. Envolva a imagem em uma div, defina a altura / largura máximas e deixe a imagem (#div img {}) ter largura 100% e altura 100%.
Mave
1
Que tipo de bruxaria é essa?! Isso é incrível!
Leonardo Wildt
24

2018 e solução posterior:

Usar unidades relativas à janela de visualização deve tornar sua vida mais fácil, já que temos a imagem de um gato:

gato

Agora queremos esse gato dentro do nosso código, respeitando as proporções:

img {
  width: 100%;
  height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Até agora não é muito interessante, mas e se quisermos alterar a largura dos gatos para no máximo 50% da janela de visualização?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

A mesma imagem, mas agora restrita a uma largura máxima de 50vw vw (= largura da janela de visualização) significa que a imagem terá a largura X da janela de visualização, dependendo do dígito fornecido. Isso também funciona para altura:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Isso restringe a altura da imagem a um máximo de 20% da janela de visualização.

roberrrt-s
fonte
obrigado! Como determino vh e vw quando tenho imagens com tamanhos diferentes?
Herman Toothrot
Olá @HermanToothrot, você está dizendo que deseja manter a proporção do aspecto ao usar as unidades da janela de visualização?
roberrrt-s
@Roberrrt digamos que tenho algumas imagens de tamanhos diferentes e em um bloco embutido e desejo manter a proporção de todas elas, mas defini-las com a mesma altura ou largura.
Herman Toothrot
Largura: 100% e altura máxima: 50vh ou inversa
roberrrt-s
@Roberrrt width: 100% não parece ter muito efeito. Só tenho que adivinhar vh, no meu caso 50 é demais e 40 maximiza a altura de todas as imagens.
Herman Toothrot
11
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

No IE, o onresizeevento é disparado a cada mudança de pixel (largura ou altura), portanto, pode haver problemas de desempenho. Atrasar o redimensionamento da imagem por alguns milissegundos usando window.setTimeout () do javascript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Shahid
fonte
6

Defina a propriedade resize para ambos. Em seguida, você pode alterar a largura e a altura assim:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}
fmoradi9
fonte
5

Você está usando jQuery?

Porque fiz uma pesquisa rápida nos plugings jQuery e eles parecem ter algum plugin para fazer isso, marque este, deve funcionar:

http://plugins.jquery.com/project/jquery-afterresize

EDITAR:

Esta é a solução CSS, acabei de adicionar um style = "largura: 100%" , e funciona para mim pelo menos no Chrome e Safari. Eu não tenho ie, então apenas teste lá e me avise, aqui está o código:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>
Arthur neves
fonte
1
jQuery é desnecessário para um problema tão simples. Por que carregar 50 KB + (biblioteca inteira) seria benéfico em algumas linhas de JS?
1
claro, você está completamente certo, que s why Iestou perguntando a ele, se ele está usando jQuery, porque se ele usar, pode ser uma boa ideia apenas adicionar o plugin!
Arthur Neves
então sem JS não é possível? Eu encontrei uma solução simples como este unstoppablerobotninja.com/search/... , no entanto eu não era capaz de implementar plenamente-lo em meu modelo com sucesso
depi
4

Inicialmente, eu estava usando o seguinte html / css:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
<div> 
  <img src="..." />
</div>

Então eu adicionei class="img"o <div> assim:

<div class="img">
  <img src="..." />
</div>

E tudo começou a funcionar bem.

Rin
fonte
2

Basta usar este código. O que a maioria está esquecendo é especificar a largura máxima como a largura máxima da imagem

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Verifique esta demonstração http://shorturl.at/nBKVY

Daniel Nyamasyo
fonte
0

Experimentar

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Funciona apenas com display block e inline block, não tem efeito nos flex items, já que passei anos tentando descobrir.

Ryan Stone
fonte