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:
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.