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

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.)

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).

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:

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.

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

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;
}

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>

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.

Você pode usar a scalepropriedade CSS3 para redimensionar a imagem com css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Leitura adicional :

• CSS3 2D Transforms
• CSS3 Hover Effect Transitions, Transformations, Animations

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

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.