Ver Mensaje Individual
  #8 (permalink)  
Antiguo 01/04/2014, 07:05
Lola Lola
 
Fecha de Ingreso: agosto-2007
Mensajes: 122
Antigüedad: 17 años, 2 meses
Puntos: 3
Respuesta: Maquetar web responsive

3) Imagenes responsive: Si quieres hacer que una imagen se ajuste al ancho del contenedor, te dejo una clase que utilizo yo, que iria seguida de la que contiene la ruta a la imagen:
Código CSS:
Ver original
  1. .box-responsive { -webkit-background-size:100%;-moz-background-size:100%;background-size:100%;background-repeat:no-repeat;margin:0 auto; }
  2. .box-header { background-image: url('../img/box.header.png');width:100%;max-width:473px;height: 134px; }

Y luego la llamas asi:
Código HTML:
Ver original
  1. <div class="box-responsive box-header"></div>

Está en dos clases para que te sea facil crear varias imagenes responsive.


Hola doctype

Lo que mencionas en el punto 3, deben crearse tantos llamados de este tipo como imagenes haya en la web? Ejemplo:

box-responsive box-header
box-responsive box-logo
box-responsive box-landscape, etc??

Saludos y gracias!

Lola