Ir para conteúdo
Entre para seguir isso  
Master_Cyber

Ajustar imagem dentro de div

Recommended Posts

Olá amigos, tenho uma div de largura 100%, e dentro dela é inserido uma imagem dinamicamente, o problema é que muitas vezes a imagem tem uma largura maior que a div, então ela acaba sendo cortada.

 

Gostaria de redimensionar a imagem para a largura da div, essas imagens já estão vindo com width e height setados.

 

segue meu css:

.content{
   max-width: 90%;
   width: 90%;
   margin: 0 5%;
   overflow: hidden;
}

.content img {
   max-width: 100% !important;
   height: auto;
}

E imagem vem assim, já com width e height

<div class="content">
    <img src="img.jpg"  width="350" height="200"/>
</div>

Só lembrando que a tag imagem não é colocada na mão, vem do banco já assim.

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se voce colocar esse overflow hidden acho meio dificil a imagem se ajustar a div, já que o overflow hidden faz com que o conteudo de dentro da div seja "cortado" caso ele ultrapasse os limites da div

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Independente se vem do banco já com o width e height incluídos, o HTML respeita o CSS em primeiro lugar, então o que estiver no CSS deve por obrigação funcionar, caso contrário, tem algo dando conflito no código.

1. Remova o overflow: hidden;

2. Porquê está usando max-width? A imagem respeita o min, o max depende da largura dela mesma.

Veja um exemplo que preparei: JSFiddle.

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Independente se vem do banco já com o width e height incluídos, o HTML respeita o CSS em primeiro lugar, então o que estiver no CSS deve por obrigação funcionar, caso contrário, tem algo dando conflito no código.

 

1. Remova o overflow: hidden;

2. Porquê está usando max-width? A imagem respeita o min, o max depende da largura dela mesma.

 

Veja um exemplo que preparei: JSFiddle.

 

Poxa cara, muito obrigado pela ajuda, ficou sucesso agora...

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.