Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Slider en responsive design

Estas en el tema de Slider en responsive design en el foro de CSS en Foros del Web. Muy buenas foreros! Os traigo una duda que me ha surgido en un diseño, sinceramente no albergo gran esperanza de lograr esto, llevo dos días ...
  #1 (permalink)  
Antiguo 14/03/2013, 11:18
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 12 años, 3 meses
Puntos: 13
Slider en responsive design

Muy buenas foreros!

Os traigo una duda que me ha surgido en un diseño, sinceramente no albergo gran esperanza de lograr esto, llevo dos días intentándolo y no termina de salirme.

Hay alguna manera de hacer que una imagen salga centrada en un div SIEMPRE, aunque la imagen sea más ancha que el mismo div? ocultando, claramente lo restante de la imagen con un overflow:hidden;

Es decir, hacer un box de 100% de ancho del navegador y que las imagenes de dentro se posicionen de manera automática centradas aunque estas sean mas anchas que el propio div?


Ups, le di sin querer a marcar como tema solucionado, pensé que era un checkbox XD
La duda persiste.
  #2 (permalink)  
Antiguo 16/03/2013, 07:02
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 5 meses
Puntos: 1011
Respuesta: Slider en responsive design

si es posible
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}



html, body {
width: 100%;
height: 100%;
}


#cont {max-width: 100%; height: 100%; background-color:#ff0;}


#centrarConPosicion{
width: 100%;
height: 100%;
background-position: center center;
background-image: url('img.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="cont">
<div id="centrarConPosicion"></div>
</div>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 16/03/2013, 14:13
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 12 años, 3 meses
Puntos: 13
Respuesta: Slider en responsive design

Agradezco tu respuesta pero no quiero usar la imagen de background, quiero usar la etiqueta IMG :)
  #4 (permalink)  
Antiguo 16/03/2013, 14:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años, 4 meses
Puntos: 2113
Respuesta: Slider en responsive design

Sin saber las medidas no se puede hacer con sólo CSS, o al menos no se me ocurre ahora, a menos que ahora exista algo del tipo text-direction: cto —center to outside . Porque la tendencia es pegarse a la izquierda, o derecha como mucho. Tendrías que usar JavaScript para calcular el ancho que va a ocupar la imagen (o imágenes) para calcular, por ejemplo, qué valor tiene que tener left en un supuesto contenedor con posición relativa.
  #5 (permalink)  
Antiguo 16/03/2013, 15:44
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 365
Antigüedad: 12 años, 3 meses
Puntos: 13
Respuesta: Slider en responsive design

Eso me imaginaba, lo haré así pues, gracias a ambos por el tiempo, de todos modos dejaré aqui la duda por si saliese algun update de CSS o alguien se le ocurriese algo :)

Etiquetas: ancho, design, imagenes, responsive, slider
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

SíEste tema le ha gustado a 1 personas




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