Hola a todos, estoy desarrollando una aplicación táctil y para hacer los botones uso el elemento "figure" de html5, me gustaría poner las medidas tanto de alto como de ancho en porcentaje así independientemente de la resolución se vería igual en cualquier equipo. El problema que tengo es que no he conseguido que me haga caso ni con el css ni desde el html. He probado de poner width="100%" en la imagen, en figure, en el css de mil formas... y no hay manera. La idea de este código es que este botón siempre ocupe 1/4 de la pantalla en cualquier resolución. Y con figure consigo una buena apariencia. Aquí esta el código:
HTML
<div style="position:absolute; top:1%; left:1%; height:50%; width:50%;">
<figure>
<img src="exit.jpg" width="100%" height="100%">
<figcaption>Salir</figcaption>
</figure>
</div>
CSS
img {
border: 1px solid #323232;
padding: 1px;
border-radius: 12px;
box-shadow: 3px 3px 5px rgba(50, 50, 50, .5);
}
figure {
margin-before: 0px;
margin-after: 0px;
margin-start: 0px;
margin-end: 0px;
display: inline-block;
margin: 0px;
}
figcaption {
padding: 0px;
font-family: 'Cherry Swash', cursive;
font-size: 0.8em;
font-weight: 700;
border: none;
background: transparent;
word-wrap:normal;
text-align: center;
}
Gracias de antemano por vuestro tiempo.