web-dev-qa-db-fra.com

CSS pour redimensionner les images et les adapter à tout écran

Je travaille avec une page temporaire à l'adresse http://www.flywavez.com mais je ne parviens pas à redimensionner et à redimensionner l'image et à la même chose dans toutes les résolutions d'écran. Sur l'iPhone, la fille est coupée avant la taille et elle s'adapte parfaitement à l'écran de mon ordinateur portable 19 "avec une résolution de 1366 x 768, et même lorsque je transmettais la vidéo à mon téléviseur 55" via VGA depuis mon ordinateur portable. Cependant, lorsque je vis sur des moniteurs plus grands avec une résolution plus grande, il y a un grand espace et une vue évidente où la taille de l'image se termine. Je pensais avoir redimensionné CSS avec /* Paysage de la tablette */ Écran @média et (largeur maximale: 1060 pixels) { #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 apparaisse sur toutes les résolutions comme sur les 1366 x 768.

Merci pour toute aide.

cssimageresponsive-design
12
abtecas

Je pense qu'il est fondamentalement impossible de réaliser ce que vous essayez de faire sans perdre le rapport d'image, ce qui est probablement indésirable. Avez-vous envisagé d'utiliser la propriété 'background-size'? Le css ci-dessous donne un très 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/

24
onestepcreative

cover Ce mot clé spécifie que l'image d'arrière-plan doit être redimensionnée pour être aussi petite que possible tout en garantissant que ses deux dimensions sont supérieures ou égales aux dimensions correspondantes de la zone de positionnement de l'arrière-plan.

contenir Ce mot clé spécifie que l'image d'arrière-plan doit être redimensionnée pour être aussi grande que possible tout en garantissant que ses deux dimensions sont inférieures ou égales aux dimensions correspondantes de la zone de positionnement de l'arrière-plan. Alors essayez d'utiliser contenir au lieu de couverture

100% Ceci redimensionnera à 100% la hauteur et la largeur sans aucun 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;
    }
6
Riya Travel

En gros, 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;
}
0
ene sorin