Foros del Web » Creando para Internet » CSS »

Pequeño reto con imagen

Estas en el tema de Pequeño reto con imagen en el foro de CSS en Foros del Web. Buen día! Me salió un pequeño reto con una imagen, trataré de explicarme lo mejor posible. Tengo una imagen de 1300px por 400px, la cosa ...
  #1 (permalink)  
Antiguo 25/06/2014, 17:00
Avatar de Huesos_Pesados  
Fecha de Ingreso: junio-2014
Ubicación: Cancun
Mensajes: 1
Antigüedad: 5 años, 4 meses
Puntos: 0
Pregunta Pequeño reto con imagen

Buen día!

Me salió un pequeño reto con una imagen, trataré de explicarme lo mejor posible.

Tengo una imagen de 1300px por 400px, la cosa es que, cuando la ventana del navegador sea de 1000px (por resolución o porque el usuario la ajustó a ese tamaño) la imagen se corte 150px de cada lado (-300px) y siga centrada con el mismo alto, si se hace la ventana de 800px entonces se cortarían 250px de cada lado (-500px de los 1300px) para quedar con el mismo alto y centrada.

Igual, si se hace grande el navegador, que la imagen recupere la parte que se recortó y que siga centrada.

Al decir "que siga centrada" me refiero a que, lo que está en el centro de la imagen siga en el centro, no que la imagen se alinee a la izquierda y que la parte de la derecha desaparezca

Espero haberme dado a entender.

Gracias desde ya, saludos

Última edición por Huesos_Pesados; 25/06/2014 a las 17:05 Razón: Trato de explicarme mejor
  #2 (permalink)  
Antiguo 25/06/2014, 17:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Pequeño reto con imagen

Algo sencillo y rápido sería:

Código CSS:
Ver original
  1. img {
  2.   position: relative;
  3.   left: 50%;
  4.   transform: translateX(-50%);
  5. }

Para lo de los márgenes, simplemente con un contenedor y margin debería de ser suficiente. Para usar transform tal vez necesites prefijos propietarios. Échale un ojo al soporte; http://caniuse.com/transforms2d.
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.

Etiquetas: pequeño, reto, tamaño
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:39.