IMGs responsivos mantêm dimensões

Question

Tenho um site responsivo, no qual estou redimensionando todas as minhas imagens nas janelas de visualização da consulta de mídia CSS3 correspondentes.Gostaria de saber se há uma maneira mais fácil de afirmar que desejo que todas as minhas imagens sejam redimensionadas mantendo suas dimensões declaradas originais, em vez de redimensionar manualmente cada uma de acordo com max-height, width, etc. Alguma sugestão?

EG abaixo.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

#logoimg { max-height: 100px; max-width: 100px; }

}

Answer 1

Acredito que declarar img {max-width: 100%} deve resolver o problema.A imagem será reduzida e manterá suas dimensões.

Answer 2

Use background-size: contain;ou tamanho do fundo: capa;conforme apropriado.

Answer 3

Isso é o que é necessário para o que é comumente referido como imagens fluidas :

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

A primeira declaração garante que todas as imagens não excedam a largura do elemento que os contém.A declaração automática de altura garante que todas as imagens mantenham suas proporções quando reduzidas, mesmo quando têm atributos de tamanho no elemento img.

Dessa forma, você pode simplesmente declarar a largura ou max-width no elemento contêiner do img sem ter que se preocupar com dimensões / proporções.

Answer 4

usar elemento de imagem http://caniuse.com/picture

manual http://www.html5rocks.com/en/tutorials/responsivo / picture-element /

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>