1

Estou com dificuldade de criar uma imagem que fique dentro de uma div, mantendo suas proporções. Porém a div tem um tamanho padrão, não podendo ultrapassar esse tamanho limite.

Abaixo deixo uma imagem que ilustra qual é minha intenção:

inserir a descrição da imagem aqui

Abaixo está o código em css que eu fiz, a imagem continua nos seus padrões, porém não é limitada na div, muitas vezes ultrapassando o tamanha desejado que caiba na tela:

  #div{
      padding-top: 20px;
      padding-bottom: 20px;
      width: 50%;
      height: auto ;
    }
  #imagem{
      width: auto;
      height: auto;
      top: 5%;
      left: 26%;
    }

Possivelmente o código esteja sem muito sentido pois estou programando web a pouco tempo.

1 Resposta 1

1

Boa tarde. Você deve deixar a imagem responsiva, para que ela possa se adaptar ao container (elemento pai), a div em questão. Use a propriedade max-width: 100%; na imagem. O max-width evitará que a imagem ultrapasse o tamanho máximo do elemento pai. Lembre-se de utilizar agum tipo de posicionamento na div pai (float por exemplo), se ela estiver como static (valor padrão), os elementos internos não ficaram restritos a ela.

Exemplo:

#imagem {
   max-width: 100%;
   float: left;
}

#div {
   float: left;
   width: 50%; /* 50% do tamanho do elemento pai */
}

Se precisar da margem utilize padding na div pai.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .