web-dev-qa-db-fra.com

Est-il possible de créer une div réactive avec une image d’arrière-plan qui maintient le rapport de l’image d’arrière-plan comme avec un <img>?

Pas un anglophone donc il y a probablement une meilleure façon de formuler la question ... de toute façon:

Ce que je veux créer est similaire à l'en-tête ici: http://thegreatdiscontent.com/adam-lisagor L'image d'en-tête est entièrement montrée dans toutes les tailles d'écran et le rapport de format de l'image est de Bien sûr toujours correct. Ceci est fait en utilisant un et en faisant en sorte que le texte apparaisse à la position d'utilisation: absolute. 

Mais si vous utilisez css pour l'image d'arrière-plan au lieu d'un, vous obtiendrez quelque chose comme cet en-tête: http://elegantthemes.com/preview/Harmony/ Redimensionnez le navigateur pour voir des parties de l'arrière-plan être laissé de côté.

Est-il possible de faire un look div et de se comporter comme le premier lien, en utilisant la propriété css background-image comme sur le second lien? Ou dois-je modifier le fonctionnement de mon en-tête entier et utiliser le pour l'arrière-plan? montrer pleinement dans toutes les tailles d'écran? 

Je voudrais avoir un fond d’en-tête qui ne laisse pas de traces, mais qui est corrigé comme ceci http://getflywheel.com/ La seule idée à ce jour est de créer un fichier png transparent ayant le bon ratio de l'image, puis utilisez background-image qui a background-attachment: fixed. Mais cela ne semble pas très intelligent.

Espérons que j'ai été assez clair pour que je me comprenne. Merci beaucoup d'avance!

cssresponsive-designbackground-image
9
Ketri

Voici une astuce simple et agréable avec seulement css/html:

Ingrédients

  • Image PNG transparente avec le rapport souhaité (Transparent-ratio-conserver.png)

  • étiquette

  • Différentes images pour différents ports de visualisation (retina.jpg, desktop.jpg, Tablet.jpg ...)

L'idée est d'ouvrir une balise et de lui attribuer une image transparente (avec le ratio souhaité). Nous ajoutons également class = "responsive-image" en HTML.

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

Dans le CSS, nous définissons une taille d’arrière-plan adaptée à la taille de l’image et la largeur de notre image.

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
}

et enfin, nous servons à chaque image la bonne image:

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
}

Vous pouvez télécharger la démo depuis ici . 

19
Yassin

Ceci est fait avec la propriété background-size:

background-size: cover;

La couverture réduira la taille de l'image, tout en maintenant la totalité du texte principal et en conservant les proportions.

Vous voudrez peut-être aussi essayer contain, ce qui rend l'image aussi grande que possible tout en s'intégrant bien dans le parent.

Sources)

MDN - Propriété CSS background-size

3
Bill

Je pense qu'il existe une meilleure solution que contain ou cover (qui ne fonctionne pas pour moi, d'ailleurs) . Voici un exemple que j'ai récemment utilisé pour un logo:

#logo{
    max-width: 600px;
    min-height: 250px;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat center;
    background-size: 100%;
}

Nous avons donc maintenant un div responsive avec une image d'arrière-plan, dont la taille est définie sur toute la largeur du div.

2
CranK

Il vous suffit de passer le rapport hauteur sur largeur à l'élément . Pour une image 1400x600;

1400: 600 = 98:42 

span( style="padding-bottom:42%;
             width:98%;
             background:url('/images/img1.jpg');
             background-size:contain;
             display:inline-block;")

afficherait la même chose que 

img(src="/images/img.jpg" style="width:98%;")
0
lonewarrior556

Bien qu’il existe d’autres solutions, ____% redimensionnera la division en taille d’image ou en format d’image.

.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;

} 

0
rajesh_kw