Dev Faq
7
votes

Fond de mise à l'échelle et taille min

Bonjour, j'ai de grandes images de fond de 1200 par 1200, ce que je voudrais faire est d'élargir les images lorsque l'utilisateur redimensionne le navigateur, mais contraignez-le afin de ne jamais réduire la taille d'origine.

Il y a toutes beaucoup d'images BG évolutives, mais aucune, je ne peux trouver que cela, toute aide serait appréciée.

0 commentaires

6 Réponses :

0
votes

Vous semblez rechercher Taille de l'arrière-plan

Je ne crois pas que cela fonctionnera sur c'est tout cependant, donc ce n'est peut-être pas une option pour vous.
Dans ce cas, je vous suggère de jeter un coup d'œil à http://www.markschenk.com /cssexp/background/scaledbgimage.html

0 commentaires
5
votes

La combinaison CSS + JavaScript + JQuery suivante a fonctionné pour moi.

Merci à Aneves pour la réponse ci-dessus qui a été utile. p>

CSS: H2> 
jQuery (function ($)
{   // ready
    $(window).resize (function (event)
    {
        var minwidth = 1200;
        var minheight = 1024;

        var bodye = $('body');

        var bodywidth = bodye.width ();

        if (bodywidth < minwidth)
        {   // maintain minimum size
            bodye
                .css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
            ;
        }
        else
        {   // expand
            bodye
                .css ('backgroundSize', '100% auto')
            ;
        }
    });
});

0 commentaires
5
votes

Une autre possibilité serait d'utiliser les requêtes de média. Définissez la taille de l'image pour être Say..1280x450, puis utilisez une requête de support de Taille de l'arrière-plan: 100% auto; pour toutes les tailles de fenêtre sur 1280px de large.

Il y a un certain code qui gère également l'image redimensionnement avec IE, cependant, a eu un succès limité avec elle ... xxx

si quelqu'un a des ajouts ou des correctifs pour ce qui précède, n'hésitez pas à contribuer.

J'espère que cela aide quelqu'un là-bas ...

0 commentaires
1
votes

Pour les images de fond, je définissais généralement une largeur minimale pour la balise HTML qui serait la largeur d'origine de l'image ou moins, cela empêche l'image de rétrécir trop loin.

0 commentaires
23
votes 
background-size: cover;
there you go
3 commentaires

Si simple! Merci beaucoup.

L'OP a demandé une solution dans laquelle les images de fond "ne font jamais échelle plus petite que la taille d'origine". Ne "couvrir" pas l'échelle de haut ou de descente jusqu'à la hauteur / largeur minimale qui remplit l'écran entier, plutôt que de se mettre à l'abri de 100%?

@Mattsoave: avec Contexte: fixe; Cultures informatiques.

1
votes

Mettez l'image dans DIV et donnez de la taille. Appliquez la propriété suivante sur la balise IMG 

background-repeat: no-repeat;
background-size: 100% 100%;

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components