Foros del Web » Creando para Internet » CSS »

Ajustar la imagen

Estas en el tema de Ajustar la imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/11/2014, 14:28
 
Fecha de Ingreso: octubre-2008
Mensajes: 87
Antigüedad: 15 años, 5 meses
Puntos: 0
Ajustar la imagen

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¡¡¡¡¡
  #2 (permalink)  
Antiguo 09/11/2014, 11:08
 
Fecha de Ingreso: octubre-2007
Mensajes: 91
Antigüedad: 16 años, 4 meses
Puntos: 1
Respuesta: Ajustar la imagen

Tal vez está heredando el margen de la propia clase
Probá agregar a la clase .award figure la propiedad {margin:-10px ;}
  #3 (permalink)  
Antiguo 11/11/2014, 09:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Ajustar la imagen

Seguramente poniendo la imagen como elemento de bloque se solucione.

Código CSS:
Ver original
  1. .award figure img {
  2.   display: block;
  3. }
__________________
(:

Etiquetas: imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:01.