CSS para que las imágenes cambien de tamaño y se ajusten igual a cualquier pantalla

He estado trabajando con una página temporal en http://www.flywavez.com pero no consigo que la imagen cambie de tamaño y sea la misma en todas las resoluciones de pantalla. En el iPhone se corta la chica antes de la cintura, y se ajusta perfectamente cuando se ve en mi 19" pantalla del ordenador portátil con la res en 1366 x 768, e incluso cuando me alimenté el video a mi 55" TV a través de VGA desde mi portátil. Sin embargo, cuando veo en monitores más grandes con mayor resolución, hay un gran espacio y la vista obvia donde termina el tamaño de la imagen. Pensé que había cambiar el tamaño de CSS con / Tablet Landscape / @media screen and (max-width: 1060px) {

wrapper { width:67%; }

     }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

     /* iphone */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        img { max-width: 100%; }
    }

    /* ipad */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
    }

Quiero que esta imagen para mostrar en todas las resoluciones como lo hace cuando se ve en el 1366 x 768.

Gracias por cualquier ayuda.

Programación
image css responsive-design
1º noviembre 2013 в 3:57
4 vistas
Solución

Creo que es fundamentalmente imposible lograr lo que usted está tratando de hacer sin perder relación de imagen, que es probablemente indeseable. ¿Has considerado usar la propiedad 'background-size'? El css de abajo consigue un aspecto bastante bueno:

body {
    background: url('images/example.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Puedes verlo aquí: http://jsfiddle.net/DTN54/

Phil
Respuesta editada 22º agosto 2017 в 2:31
Comentarios (2)

cover Esta palabra clave especifica que la imagen de fondo debe escalarse para que sea lo más pequeña posible, garantizando al mismo tiempo que sus dos dimensiones sean mayores o iguales que las dimensiones correspondientes del área de posicionamiento del fondo.

contain Esta palabra clave especifica que la imagen de fondo debe escalarse para que sea lo más grande posible, garantizando al mismo tiempo que sus dos dimensiones sean menores o iguales que las dimensiones correspondientes del área de posicionamiento del fondo. Pruebe a utilizar contener en lugar de cubrir

100% Esto escalará el 100% tanto de alto como de ancho sin ningún recorte.

body {
        background: url('images/example.jpg') no-repeat fixed;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
0_jump
Respuesta editada 2º noviembre 2017 в 10:37
Comentarios (0)

Básicamente, esto es todo lo que necesitas:

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
deChristo
Respuesta editada 13º diciembre 2016 в 12:09
Comentarios (0)