1

Estoy realizando una pequeña página web pero tengo algunos problemas con los estilos. Mi problema es el siguiente:

Tengo un slider de esta manera

introducir la descripción de la imagen aquí

Ahora bien, usando la clase img-resposive de bootstrap, las imágenes se adaptan a sus contenedores. Sin embargo necesito que, en el col-md-4, que a su vez contiene 3 article con una imagen cada uno, la imagen se desborde del article pero no invada los otros.

Es decir, la imagen sería el recuadro amarillo, y

  1. La imagen se desborde del div

  2. Se centre verticalmente

  3. Lo que se ha desbordado arriba y abajo se oculte para que no se invadan los demás articles.

7
  • 7
    Hola! Te recomiendo adjuntar el código que hayas logrado hasta ahora para que podamos ayudarte, Saludos! Commented el 22 feb. 2018 a las 18:12
  • 2
    Necesitas aplicarle al contenedor de la imagen unas clases CSS con algunos parametros. Te doy algunos consejos: con width y height (teninedo display:block) consigues que se llene todo el contenedor de la imagen. Por el contrario, si quieres que la imagen sea 1:1 y se oculte, el ccontenedor debe tener una propiedad en CSS que sea overflow:hidden. A ver si con algo de eso puedes hacer algo ;) Commented el 22 feb. 2018 a las 18:26
  • 1
    ¿A que te refieres con que la imagen se desborde del div? Commented el 22 feb. 2018 a las 18:28
  • 1
    la idea es lograr que la imagen no se "aplaste" al re dimensionar el alto de la imagen, es decir mantenga su altura original y posteriormente centrar la imagen no importa que se vuelen cabezas o pies por así decirlo. En unos momentos anexo el código muchas gracias Commented el 22 feb. 2018 a las 18:41
  • 2
    @UnsignedFoo por favor publica tu comentario como respuesta; así el OP aceptará su respuesta y así la pregunta no quedará "sin respuesta". Saludos. Commented el 22 feb. 2018 a las 19:46

3 respuestas 3

1

Necesitas aplicarle al contenedor de la imagen unas clases CSS con algunos parametros. Te doy algunos consejos: con width y height (teninedo display:block) consigues que se llene todo el contenedor de la imagen. Por el contrario, si quieres que la imagen sea 1:1 y se oculte, el contenedor debe tener una propiedad en CSS que sea overflow:hidden.

A ver si con algo de eso puedes hacer algo ;)

Me alegro de haber ayudado. Pasa un buen dia!

1

Podrías probar combinaciones de las propiedades overflow-x (para manejar el desbordamiento horizontal), y overflow-y (para manejar el desbordamiento vertical). Como no proporcionas código adicional o más información de lo que quieres lograr, es un poco difícil.

Te dejo un jsFiddle para que veas las propiedades overflow-x y overflow-y en acción.

Espero te ayude.

-1

No sé si entiendo bien que es lo necesitas exactamente. Sería mejor que compartieras tu código para ver como lo tienes y sobre eso poder ayudarte. De todas formas, lo que entiendo es que necesitas que la imagen se coloque ocupando todo el 'article' y para eso podrías realizarlo por ejemplo así:

.claseImg {background: url('url de la imagen') no-repeat center center: background-size:cover}

Si además quieres que se coloque el título de la imagen sobre la parte superior de esta es este título el que debes mover, por ejemplo:

.claseTitulo {position:relative: margin-top:25px; background: #000 .3; text-align:center}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.