Max taille pour l'image d'arrière-plan CSS

J'ai un 70 50 px de la boîte et j'ai plusieurs images (fichiers SVG, donc pas de taille) je tiens à garder leur aspect ratio, mais certaines images sont le portrait et certains sont paysage de taille moyenne. Alors je peux le faire:

background-size: 70px auto;

et qui va travailler pour tout le paysage des icônes. Mais il va étirer le portrait des images et de les rendre plus grand, de sorte qu'ils auront toujours le rapport d'aspect correct, mais le haut et le bas est coupé.

est-il une sorte d'arrière-plan-max-taille?

(sinon, la seule raison pour laquelle je suis à l'aide de l'image de fond est que vous pouvez centrer aligner l'image à l'horizontale et verticalement, donc l'alternative est de trouver comment faire pour aligner verticalement un élément img à l'intérieur d'un élément li.)

InformationsquelleAutor Jonathan. | 2010-10-29
  1. 6

    C'est un problème de CSS ne peut pas résoudre sur son propre. Il y a des bibliothèques JavaScript qui va faire ce travail. Si vous utilisez jQuery, vous pouvez trouver un plugin ou un rouleau de votre propre fonction.

    Saisir le largeur et hauteur de l'image, et de calculer le ratio (x/y). Si le ratio est supérieur à 70/50 (1.4), définissez la largeur de 70 pixels et la hauteur (70 * x/y). Si le ratio est inférieur à 70/50 (1.4), réglez la hauteur de 50px et la largeur (50 * x/y).

    Voir aussi CSS vertical-align

    Si vous utilisez les navigateurs qui ne prennent pas en charge vertical-align, vous pouvez positionner l'image absolument à 50%, et de définir la marge supérieure à (largeur * -0.5) à l'aide de JavaScript. Que va aligner le milieu de l'image avec le milieu de l'élément parent, qui est le même que verticale du centre de l'alignement.

    • Pouah, pourquoi ne peut-CSS viens de faire centre vertical de l'aligner comme c'est le centrage horizontal. CSS peut être si beaucoup plus facile, sensible évident !!!
    • CSS peut faire vertical-align juste bien, seul Microsoft planté comme d'habitude. Ne blâme pas les CSS, le blâme M$ 🙂
    • Microsoft? ce qu'ils avaient à faire avec elle? Et si j'ai vertical-align:centre le dim parent c'dos pas aligner verticalement
    • vertical-align doit être "moyen", pas de "centre" (Oui, c'est incohérent.)
    • droite 🙂 je voulais dire moyen, j'ai utilisé du milieu dans mon code, juste écrit center ici.
    • Ceci est incorrect. La bonne réponse est ci-dessous a actuellement 23 upvotes.

    InformationsquelleAutor kijin
  2. 29

    Il n'est pas difficile de faire ça avec CSS

    • 1er, veuillez jeter un oeil à la Mozilla Specs pour les unités mixtes de background-size.
    • 2e, veuillez simplement considérer réglage background-size: contain; (IE9+, Safari 4.1+, FF 3.0+, Opera 10+) et min/max-width/height pour l'élément conteneur.
    • background-size: contain a fait le tour de mon cas d'utilisation.
    • "background-size: contiennent;" ne résout pas le problème si une certaine hauteur est nécessaire pour l'image. "min-height" pour l'élément de conteneur ne fera pas l'image de couverture de la hauteur.
    • J'ai background-size: 100% pour mon cas d'utilisation, et puis je viens de dire à l'élément sur lequel j'ai appliqué la background-image d'avoir un max-size à mon plus grand breakpoint. Fonctionne comme un charme.
    InformationsquelleAutor kaiser
  3. 16

    Vous pouvez absolument résoudre ce problème sans JavaScript à l'aide d'une combinaison de CSS3 background-size et les media-queries. par exemple:

    @media only screen and (max-width: 1000px) {
    #element {
        background-size: contain;
    }
}

    Noter que ne sont pris en charge dans IE8 ou en dessous, de sorte que vous devriez inclure des issues pour les vieux c'est à dire si vous avez encore le soutenir.

    InformationsquelleAutor richardwestenra
  4. 4

    La réponse à cette question est un peu hors de date. Comme stringman5 mentionne, ni de la CSS options sont pris en charge dans IE8 ou ci-dessous. Il n'est également pas le meilleur choix pour avoir jQuery gérer vos images d'arrière-plan si il n'est pas nécessaire. Pour utiliser une option qui comprend la base pour navigateur plus ancien, sans l'aide de JavaScript, vous pouvez faire quelque chose le long de ces lignes:

    #myElement {
    background: #FFFFFF url('mybackground.jpg') no-repeat right top;
}

@media only screen and (max-width: 1024px){
    #myElement {
        background-size: 50%;
    }
}

    Avis que je suis en utilisant max-width dans ma requête des médias, ce qui signifie que background-size: 50%; sera appliquée JUSQU'à ce que 1024px. Au-delà de ce point, il fait la taille par défaut. Dans les anciens navigateurs qui ne prennent pas en charge les requêtes de média ou de fond de taille, ils vont ignorer les options et de rendre la taille maximale de l'image d'arrière-plan (taille par défaut).

    • Pour développer cette réponse, maintenant CSS a la aide règle pour ajouter quelque chose seulement si le navigateur prend en charge. Il faut dire cependant, que IE11 ne prend pas en charge @supports, donc cela peut avoir des comportements involontaires.
    InformationsquelleAutor Matt Wagner