Buenas noches,
Puedes usar flexbox, que ya está incluido en HTML y olvidarte de porcentajes y píxeles:
<div id="container">
<img class="image" src="#PATH" />
</div>
Cómo puedes ver esto es muy sencillo, una imagen dentro de un div:
#container {
display: flex;
flex-direction: column;
width: 38px;
height: 1px;
}
.image {
flex-grow: 1;
height: 100%;
} indica como se van a ordenar los elementos dentro de
#container. En este caso he puesto column que significa de arriba abajo.
Flex-grow indica el porcentaje de tamaño que tendrá el elemento dentro del contenedor, por ejemplo, si pusieramos otra imagen con
flex-grow: 2, la primera ocuparía un tercio del contenedor y la segunda dos tercios, así de simple.
Aquí te dejo un plunkr que demuestra mi código, prueba de ir cambiando valores al height y el width del contenedor y verás como va redimensionando la imagen.
http://plnkr.co/edit/0gbVsYxCBkV4iRDZGsve?p=previewSalu2
PD: Para más información sobre flex-box, una guía muy completa en CSS-Tricks:
A Complete Guide to Flexbox | CSS-Trickshttps://css-tricks.com/snippets/css/a-guide-to-flexbox/
Mostrar Mensajes
