[SOLUCIONADO] Slider en responsive design

bNd170 · #1 (**permalink**) 14/03/2013, 11:18

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.

IsaBelM · #2 (**permalink**) 16/03/2013, 07:02

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>

bNd170 · #3 (**permalink**) 16/03/2013, 14:13

Agradezco tu respuesta pero no quiero usar la imagen de background, quiero usar la etiqueta IMG :)

pzin · #4 (**permalink**) 16/03/2013, 14:33

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.

bNd170 · #5 (**permalink**) 16/03/2013, 15:44

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 :)