Foros del Web » Creando para Internet » CSS »

Enmarcar Imagen con CSS

Estas en el tema de Enmarcar Imagen con CSS en el foro de CSS en Foros del Web. Me gustaria saber dada una imagen imaginemos de 32 por 32 como situar con css un marco al rededor de la msma de un ancho ...
  #1 (permalink)  
Antiguo 12/09/2006, 13:56
(Desactivado)
 
Fecha de Ingreso: septiembre-2006
Mensajes: 216
Antigüedad: 11 años, 3 meses
Puntos: 0
Exclamación Enmarcar Imagen con CSS

Me gustaria saber dada una imagen imaginemos de 32 por 32 como situar con css un marco al rededor de la msma de un ancho de 100 de ancho por 100 de alto , qiedando todo como la foto y al rededor el css haciendo de marco , he tratado hacerlo pero el marco no sale del tamaño ni como yo quiero , a ver si a alguien se le ocurre algo , saludos y gracias a todos
  #2 (permalink)  
Antiguo 12/09/2006, 14:37
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
usa Border.

Código HTML:
<img src="imagen.jpg" alt="Su texto alternativo" class="enmarcada"/> 
Y el CSS
Código:
.enmarcada{
border:5px solid #000; /* ancho - tipo - color */
padding:10px; /* distancia entre la img y el borde */
margin:5px; /* distancia entre el borde y el contenido */
width:32px /* el ancho de la img */
}
NOTA: el ancho total va a ser width + padding + border + margin
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 12/09/2006, 14:39
 
Fecha de Ingreso: febrero-2005
Mensajes: 105
Antigüedad: 12 años, 10 meses
Puntos: 1
Bueno, pues lo que a mí se me ocurre es que metas la foto dentro de un div de la siguiente forma:

Código HTML:
<div id="foto">
    <img .../>Colocamos la imagen.
</div> 
Y luego utilices CSS así, por ejemplo:
Código:
#foto {
padding: 100px;
background-color: #color que quieras que tenga el marco;
border: 1px solid #mismo color que antes (no es necesario);
}
Añádele las cosas que quieras, pero creo que la base para obtener el resultado que tu buscas es esta .

Bye!
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 11:23.