web-dev-qa-db-fra.com

taille de l'arrière-plan contient, mais n'augmente pas

J'ai mis mon image de fond à contain:

.el {
    background: url(path/to/img.jpg) no-repeat center center;
    background-size: contain;
}

Mais cela redimensionne l'image. Je souhaite que l'image ne soit jamais plus grande que ses dimensions d'origine et ne soit réduite que si elle ne correspond pas à sa résolution d'origine.

Voici une démo: http://jsfiddle.net/6W3yh/

Je recherche une solution en CSS uniquement.
Pas de JavaScript s'il vous plaît.

htmlcsshtml5css3background
27
MegaHit

Malheureusement, ce que vous voulez faire n'est pas possible en CSS.

Votre meilleur pari est de définir la taille de l'arrière-plan à l'aide de Javascript. Toutefois, si vous souhaitez que l'image soit réduite si le conteneur est plus petit, vous devez pouvoir récupérer la hauteur naturelle de l'image.

if ($('.el').height() < imageHeight) {
  $('.el').css('background-size', 'contain');
}
else {
  $('.el').css('background-size', 'auto');
}
7
Bill

Vous pouvez utiliser ce correctif JQuery:

$('.target').each(function() {
        if ($(this).css('background-size') == 'contain') {
            var img = new Image;
            var currObj = $(this);
            img.src = currObj.css('background-image').replace(/url\(|\)$/ig, "").replace(/"/g, "").replace(/'/g, "");
            img.onload = function(){
                if (img.width < currObj.width() && img.height < currObj.height()) {
                    currObj.css('background-size', 'auto auto');
                }
            }
        }
    });
3
be3

Vous pouvez utiliser Technique de boîte rembourrée Ol 'd'Oncle Dave's pour cela. Voici un violon le montrant en action .

div {
    background: url(http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png) no-repeat center center;
    background-size: 100%;

    width: 100%;
    max-width: 128px;
    height: 0;
    padding-bottom: 100%; /* (Image Height / Image Width) * 100%; */
}

Le seul problème est que vous aurez besoin de connaître la largeur de votre image pour que cela fonctionne. Si vous utilisez un préprocesseur CSS tel que Compass, vous pouvez transférer ce travail sur le processeur au lieu de le faire manuellement. Regardez ici pour des informations à ce sujet .

2
kpeatt

Pour obtenir la largeur/hauteur naturelle, vous pouvez placer l’image d’arrière-plan dans le code HTML et la masquer, puis saisir l’image largeur/hauteur avec le script.

HTML:

<div></div>
<img id="background" style="display: none" src="http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png" />

JS:

var backgroundSize = $('#background').css('width');
1
veinmelter

Solution CSS : Vous devez connaître la hauteur et la largeur de l'image.

@media screen and (max-width: 640px) and (max-height: 480px) {
    div {
        background-size: contain !important;
    }
} 

div {
    background: #000 url('https://i.imgur.com/someimage.jpg') no-repeat center center;
    background-size: 640px 480px;
}

Où l'URL de l'image est https://i.imgur.com/someimage.jpg et la largeur et la hauteur de l'image sont 640px et 480px respectivement.

0
I.Am.A.Guy