28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background-size responsive

Bonjour a tous,

Voila, j'aimerais changer mes sites responsive. Au lieu de les faire a l'aide des "break points" je veux utiliser la méthode des pourcentages. Et j'aimerais donc que la hauteur de mon "slideshow" ou bloc avec background image s'adapte en fonction du redimensionnement de la fenetre.

J'ai fais un test, mais j'ai un bug avec un gros espace blanc en-dessous de ce fameux bloc. Quelqu'un aurait-il une idee de comment resoudre ca ? Merci a tous pour votre aide.

Lien test ici
Modifié par fanny95 (28 Jan 2015 - 02:17)
@juliesunset
Le résultat n'est pas du tout le même. Je voulais mettre la propriété background-size:contain. C'est ce resultat que je veux. Mais sans le fond noir.
background-size:100% auto donne la même chose que background-size:contain...

Ce que tu souhaite c'est bien cover (l'image s'adapte en hauteur et en largeur selon la grosseur du conteneur), mais je pense que ton image n'est simplement pas adapté pour ce que tu veux faire.
salut,
je pense aussi que c'est le "cover" que tu cherches. Le "contain" adaptera ton image au côté qui a la plus grande dimension tandis que le "cover" recouvrira toute la surface.
Je viens de faire un test avec une image juste au dessus. L'image s'adapte bien et ca fonctionne parfaitement. C'est le resultat que je veux avoir avec la propriete CSS background-size.

Mais lors de son utilisation en cover/contain, rien ne va plus. Ma div ne se redimensionne pas correctement. Sachant que je veux utiliser une image de cette taille la, quelle serait la solution CSS pour eviter ce bug ?

Mince Smiley decu
Administrateur
Bonjour Fanny,

En fait tu recherches un comportement contradictoire :
- cover ne te convient pas parce que tu ne souhaites pas que le background soit croppé (tu veux qu'il reste entier)
- 100% auto ne te convient pas parce que tu ne souhaites pas de "vide" dans le div, or ton div a une hauteur définie

Ce que tu voudrais serait une combinaison des deux.

Pour l'instant il n'y a pas de solution magique supercompatible, mais en attendant tu peux passer par ce hack : http://alistapart.com/article/creating-intrinsic-ratios-for-video (c'est appliqué sur des vidéos, mais fonctionne aussi sur des background)

Bonne chance Smiley smile
Bonsoir Raphael

Merci pour ta réponse. Je n'avais plus aucun espoir, mais après j'ai lu le dernier article qu'a écrit Stéphanie, et hop =D Magiiiiiie. Ça marche ! Enfin, j'ai juste du changer la propriété width par 100% et c'est parfait !

Lien de l'article
.ratio {
    background: url("monimage.jpg") no-repeat;
    background-size: cover;
    width: 100vw;  // pour moi il faut remplacer par 100%
    height: 56.25vw;
}  

<div class="ratio"></div>


Pour calculer le chiffre height : 100 x hauteur / largeur

Merci à Alsacreations =D
Modifié par fanny95 (29 Jan 2015 - 04:01)
Sujet clos
Aller à