tengo un codigo similar a este:

.contenedor-img {
max-width: 300px;
max-height: 200px;
float: left;
overflow: hidden;
position: relative;
/*text-align: center;
cursor: default;*/
background: #fff;
}  como hago para colocar esos px en su equivalente en % ?

Hola,

Para convertir un valor en píxeles a porcentaje necesitas saber respecto a qué medida quieres el porcentaje, porque un porcentaje en CSS siempre es relativo a otra cosa (normalmente el contenedor padre). La fórmula es sencilla una vez tienes esa referencia:

porcentaje = (valor_en_px / medida_del_contenedor_en_px) * 100

Por ejemplo, si tu .contenedor-img vive dentro de un elemento padre que mide 1000px de ancho, y quieres que max-width: 300px sea un porcentaje de ese ancho:

300 / 1000 * 100 = 30%

.contenedor-img {
    max-width: 30%;
}

Lo mismo para el alto, pero ojo con un matiz importante: los porcentajes en height/max-height solo funcionan si el elemento padre tiene una altura explícita definida (en px, o en cualquier unidad que no sea también porcentaje sin fin). Si el padre tiene height: auto (que es el valor por defecto y el más habitual), un max-height en porcentaje en el hijo simplemente no tiene ningún efecto, porque no hay una altura de referencia real de la que calcular el porcentaje.

Si lo que buscas es que el elemento se adapte de forma fluida al espacio disponible sin depender de calcular a mano estos porcentajes, hoy en día suele ser más cómodo resolverlo con width: 100% combinado con max-width en una unidad fija, o directamente con Flexbox/Grid en el contenedor padre, en vez de convertir píxeles a porcentajes a mano cada vez que cambia el diseño.

Alvaro