Foros del Web » Creando para Internet » CSS »

ajustar imagen a div teniendo solo el ancho del div

Estas en el tema de ajustar imagen a div teniendo solo el ancho del div en el foro de CSS en Foros del Web. Lo que intento conseguir es ajustar una imagen a una capa donde solo tengo definido el ancho y en este caso es en %, pero ...
  #1 (permalink)  
Antiguo 14/09/2013, 03:10
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 13 años, 6 meses
Puntos: 5
ajustar imagen a div teniendo solo el ancho del div

Lo que intento conseguir es ajustar una imagen a una capa donde solo tengo definido el ancho y en este caso es en %, pero no se me ajusta alguna idea de como conseguir ese efecto, pongo ejemplo;


css
Código CSS:
Ver original
  1. #capa-imagen{
  2.      width:50%;
  3. }
  4. #capa-imagen img{
  5.      border:none;
  6.      padding:0;
  7.      margin:0;
  8.      width:100%;
  9.      height:auto;
  10. }

Código HTML:
Ver original
  1. <div id="contenedor">
  2.        <div id="capa-imagen">
  3.              <img src"imagen.jpg">
  4.        </div>
  5. </div>

la imagen no se ajsuta la parte de abajo, que estoy haciendo mal?

Saludos.
  #2 (permalink)  
Antiguo 14/09/2013, 12:19
 
Fecha de Ingreso: junio-2012
Ubicación: colombia
Mensajes: 48
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: ajustar imagen a div teniendo solo el ancho del div

Podria funcionar de la siguiente forma:
Código CSS:
Ver original
  1. #capa-imagen {
  2.      background-image: url("ruta_de_la_imagen");
  3.      width:50%;
  4. }
codigo html:
Código HTML:
Ver original
  1. <div id="contenedor">
  2.        <div id="capa-imagen">
  3.        </div>
  4. </div>
  #3 (permalink)  
Antiguo 14/09/2013, 12:55
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 2 meses
Puntos: 578
Respuesta: ajustar imagen a div teniendo solo el ancho del div

Si la imagen está dentro del div se alineará a él automáticamente:
Código CSS:
Ver original
  1. #capa-imagen>img {
  2.      background-image: url("url");
  3.      position: relative;
  4. }

Luego lo puedes ir posicionando con márgenes... Saludos!

Etiquetas: ancho
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 21:24.