2

Tengo una imagen vertical de 1200px ancho por 1800px alto. La pantalla del pc es aproximadamente la mitad de alta que la imagen y quisiera ajustarla al 100% de la altura de la pantalla, con css y html5 y que sea responsive.

A ver si podeis ayudarme, muchísimas gracias!

2
  • En los diseños responsive se tiende a controlar el ancho de los elementos con respecto al de la pantalla. Controlar además la dimensión vertical es difícil y añade demasiado CSS extra, es decir, que los diseños se hacen para un desplazamiento vertical de los contenidos. Para lo que necesitas sería mejor usar JS, obteniendo las dimensiones del área visible y redimensionando la imagen en consecuencia.
    – Orici
    Commented el 21 may. 2017 a las 16:53
  • gracias por contestar
    – Basicmix
    Commented el 22 may. 2017 a las 16:47

2 respuestas 2

1

Si le asignas esta clase CSS a una etiqueta DIV, lograrás que tu imagen se adapte al 100% tanto en altura como en anchura y si redimencionas la pantalla, la imagen se va adaptar a esa redimensión.
Esta clase es asumiendo que quieres tu imagen como tipo "imagen de fondo", ya que si quieres cambiar el tamaño del DIV, pueden jugar con el widht y el height y la imagen se adaptará al tamaño del DIV y con esto la puedes ajustar vertical u horizontal, como gustes... el detalle está en que jueges con el width y el height
Para el posicionamiento cambia los valores de top y left.

.imgContainer {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height:100%;
    background-image: url('la_ruta_de_tu_imagen');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
1
  • no hablaba de imagenes de fondo pero me irá bien saberlo, gracias por tu ayuda!
    – Basicmix
    Commented el 25 may. 2017 a las 13:52
-1

Lo que hace el siguiente código es que la página web ocupe toda la pantalla, y además, que las imágenes tengan ancho automático y la totalidad del alto.

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

.tu-imagen {
    height: 100%;
    width: auto;
}

Edit: Aclaro que la imagen tiene que ser hijo directo del body, si la imagen está contenida en un div por ejemplo, a ese div también tienes que darle el 100% de altura de la pantalla.

.tu-div { height: 100% }
1
  • muchas gracias!!!
    – Basicmix
    Commented el 22 may. 2017 a las 16:47

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.