Est-il possible de créer une div responsive avec une image de fond qui maintient le rapport de l'image de fond comme avec un & imt & gt;
Pas un anglophone, il y a probablement une meilleure façon de la forme de 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 montré pleinement à tous les screensizes, et le rapport d'aspect de l'image est bien sûr toujours correcte.
C'est fait à l'aide d'un et d'obtenir le texte qui doit apparaître sur l'utilisation de la position: absolute.
Mais si vous utiliser les css pour l'image de fond d'écran au lieu d'un , vous obtiendrez quelque chose comme cet en-tête: http://elegantthemes.com/preview/Harmony/
Redimensionner le navigateur pour voir les parties de l'arrière-plan à gauche.
Est-il possible de faire une div qui ressemblent et se comportent comme le premier lien, à l'aide de l'image de fond d'écran de propriétés css comme sur le deuxième lien?
Ou dois-je changer la façon dont l'ensemble de mon en-tête œuvres et de les utiliser pour l'arrière-plan pour afficher pleinement à tous les screensizes?
Je voudrais avoir un en-tête arrière-plan qui n'est pas leavy quoi que ce soit, mais est fixé comme ce http://getflywheel.com/
Rien qu'à l'idée pour l'instant est de faire un png transparent qui a le bon ratio de l'image, et ensuite utiliser background-image background-attachment:fixed. Mais cela ne semble pas très intelligent.
Heureusement, j'ai été assez clair que je vais l'avoir compris. Je vous remercie tous à l'avance!
source d'informationauteur Ketri | 2013-04-08
Vous devez vous connecter pour publier un commentaire.
Voici une belle et simple de pointe avec uniquement du css/html:
Ingrédients
Image au format PNG Transparent avec le rapport désiré
(transparent-ratio-conservateur.png)
tag
Des images différentes pour différentes vue-ports (retina.jpg, desktop.jpg,
tablet.jpg...)
L'idée est d'ouvrir une balise et de l'attribuer à une image transparente (avec notre ratio désiré). Nous avons également ajouter class="responsive-image" que tout est en HTML.
Dans le CSS, nous avons mis en arrière-plan de la taille pour s'adapter à la et nous de choisir la taille de notre image.
et enfin, nous nous servons pour chaque vue-port de l'image de droite:
Vous pouvez télécharger la démo de ici.
C'est fait avec en arrière-plan, la taille de la propriété:
Couverture de l'image pour la rendre aussi petit qu'il peut l'être, tout en recouvrant l'intégralité de son parent, et de maintenir son ratio d'aspect.
Vous pouvez également essayer de
contain
ce qui rend l'image aussi grand qu'il peut être tout en continuant de montage à l'intérieur de la mère.Source(s)
MDN - background-size propriété CSS
Je pense qu'il y a une meilleure solution que
contain
oucover
(nid fonctionne pas pour moi, d'ailleurs).Voici un exemple que j'ai utilisé récemment pour un logo:
Alors maintenant, nous avons un réactif de div avec un backgound de l'image, dont la taille est définie sur toute la largeur de la div.
Bien qu'il existe d'autres solutions.
% à l'échelle de la div pour la taille de l'image ou le ratio d'aspect.
}
Vous avez juste besoin de passer à la hauteur pour le ratio largeur de l'élément.
Pour une image 1400x600;
1400:600 = 98:42
serait d'afficher le même que