Muy buenas amigos
Espero q alguien me pueda ayudar pq he intendado varias cosas y no soy capaz. Lo que pretendo es crear una ficha (div class=award) que contendrá la foto del premiado en la esquina superior izquierda y ya me ocuparé luego de crear otra capa que flote junto a la foto con los datos (No tengo muy claro tampoco si usaré una <div class=datos> o usar la etiqueta figcapti) . El
problema es que la imagen o foto, no se ajusta totalmente a ".award figure" (también me pasa lo mismo si en lugar de figure defino una clase para una div) y me deja debajo de la foto un margen de aprox 5px mostrando el background-color de ".award figure". he probado ha definir en ".award figure" un height:auto, max-height, etc..... El problema lo he aislado y trabajo para solucionarlo en un código muy reducido (por si el margen me lo ocasionaba otra regla css). el código es el siguiente:
CSS (Código completo)
Cita: .award{
width:100%;
margin:10px auto;
font-size:0.8em;
background-color:#ebebeb;
color:#000;
border-bottom:3px solid #b41e1e;
border-top:3px solid #b41e1e;
overflow:hidden;
clear:both;}
.award figure{float:left; width:20%; background-color:#2a208e; margin-left:5px;}
.award figure img{width:100%;}
HTML(Código completo)
Cita: <!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div class="award">
<figure><img src="imagesWeb/FMoraca.jpg" alt="F.Moraca"/></figure>
</div>
</body>
</html>
Qué pasa?? por qué no se ajusta al 100% mi imagen a su contenedor y me deja ese margen debajo??
MUCHÍSIMAS GRACIAS POR VUESTRA AYUDA¡¡¡¡¡