CSS pour faire des images redimensionner et fit un écran de la même

J'ai travaillé avec un temp de page à http://www.flywavez.com mais je ne peux pas obtenir l'image pour la redimensionner et la même dans toutes les résolutions d'écran. Sur l'iPhone, il coupe la jeune fille avant de la taille, et il s'intègre parfaitement lorsqu'il est affiché sur mon 19" écran d'ordinateur portable avec le res à 1366 x 768, et même quand je nourris la vidéo à mon 55" TV via VGA de mon ordinateur portable. Cependant lorsque je l'ai vue sur un grand écran avec une meilleure résolution, il y a un grand espace et évidente de vue où la taille de l'image se termine. Je pensais que j'avais le redimensionnement CSS avec
/* Tablette Paysage */
@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%; }
    }

Je veux que cette image à afficher sur toutes les résolutions, comme c'est le cas vu sur la résolution de 1366 x 768.

Merci pour toute aide.

OriginalL'auteur abtecas | 2013-11-01

  1. 24

    Je pense qu'il est fondamentalement impossible de réaliser ce que vous essayez de faire de sans perdre l'image, qui n'est probablement pas souhaitable. Avez-vous envisagé d'utiliser le "fond" taille de la propriété? Le css ci-dessous réalise un assez bon look:

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

    Vous pouvez le voir ici: http://jsfiddle.net/DTN54/

    désolé si tard pour en revenir avec vous, mais il me semble que si la moitié seulement de son corps montre. (Je veux les jambes) haha.
    en fait cela fait un travail. J'ai juste regardé le violon, et vu l'image. Espérons que ça va vers le bas l'échelle de l'autre taille rez de bien. la vérification sur mon iPhone.

    OriginalL'auteur onestepcreative

  2. 6

    couvrir Ce mot clé indique que l'image d'arrière-plan doit être mis à l'échelle pour être aussi petite que possible, tout en veillant à la fois ses dimensions sont supérieures ou égales aux dimensions correspondantes de l'arrière-plan de zone de positionnement.

    contiennent Ce mot clé indique que l'image d'arrière-plan doit être mis à l'échelle pour être aussi grand que possible, tout en veillant à la fois ses dimensions sont inférieures ou égales aux dimensions correspondantes de l'arrière-plan de positionnement de la zone. Donc essayez d'utiliser contiennent au lieu de couvrir

    100% Ce à l'échelle de 100% à la fois de la hauteur et la largeur, sans recadrage.

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

    OriginalL'auteur Riya Travel

  3. 0

    Fondamentalement, c'est tout ce dont vous avez besoin:

    body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}

    OriginalL'auteur ene sorin