Imagem dentro da Div

[Itiel 0]

Estou com um problema e não consigo resolver!

As imagens dentro da div naõ correspondem o que eu quero mostrar, por exemplo, quero ela do tamanho original só que não passe a div (aqui a div fica grande e sai até do lugar quando a imagem é grande)

 

Se eu tirar o width: 100%; a imagem pequena fica do tamanho certo:

Se eu coloco width: 100% a imagem grande fica do tamanho da div, mas as imagens pequenas como a de cima fica assim:

 

A imagem grande sem o width:100% buga a div:

 

Já tentei de tudo e não consigo fazer as imagens pequenas ficar do tamanho original e as grandes caber na div!

 

Uso uma div para a img:

img{
	width: auto;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
	border: 0;
}

Por favor me ajude! Obrigado!

[L. Henrique 179]

Itiel,

Vamos partir do básico, ok? - Uma imagem responsiva (que se adapta aos limites da div) é estruturada da seguinte forma:

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

Até então nada muito diferente do que você já tentou ou deve possuir. Se a sua imagem está quebrando a div, então pode existir algum problema no seu HTML ou (mais provável) no CSS da sua div.

Se você define parâmetros pra essa div, a imagem não deve quebra-lo.

Se puder, pegue seu código e trabalhe nele através do JSFiddle, se der tudo certo, então existe outro problema no seu site. Se der errado, o problema estará ali mesmo.

Não se esqueça de compartilhar o link do JSFiddle aqui nesse tópico, assim consigo analisar o código por inteiro pra poder entender o que acontece.

No mais não tem mesmo o que dizer.