Use CSS para tornar uma imagem responsiva à largura da tela

O que precisamos é de uma consulta de mídia:

@media screen and (max-width: 500px) {
    .hide-in-small-screen {            
        display: none;
    }
    . reduce-in-small-screen{
        max-height: 60%;
    }
}

Em seguida, aplique a classe ao elemento DOM que queremos controlar.