Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

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.

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

×

Informação importante

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