background-size contiene, ma non scalare fino

ho impostato la mia immagine di sfondo per contain:background-size contiene, ma non scalare fino

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

Ma in grado di scalare l'immagine in alto. Voglio che l'immagine non sia mai più grande delle sue dimensioni native e ridimensiona solo quando non si adatta alla sua risoluzione nativa.

Ecco una demo: http://jsfiddle.net/6W3yh/

Sto cercando una soluzione solo in CSS.
No JavaScript per favore.

fonte

2013-03-12 MegaHit

Un'alternativa è utilizzare le query multimediali CSS per regolare le dimensioni dell'immagine in base a dimensioni dello schermo diverse rispetto alla dimensione dell'immagine. – blackhawk

@blachawk - Lo capisco, ma sto cercando di evitarlo per più motivi, non ultimo dei quali è che dovrò aggiornare le mie richieste multimediali ogni volta che l'immagine (dimensioni) viene aggiornata :( – MegaHit

Che potrebbe non essere vero se decidi di sperimentare con percentuali ... In teoria le tue immagini future dovrebbero andare bene – blackhawk

Sfortunatamente, ciò che si vuole fare non è possibile nei CSS.

La soluzione migliore è impostare la dimensione dello sfondo utilizzando Javascript. Tuttavia, se si desidera ridimensionare l'immagine se il contenitore è più piccolo, sarà necessario recuperare l'altezza naturale dell'immagine.

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

fonte

2013-03-12 14:51:23 Bill

So come farlo in JS. Sto cercando una soluzione solo CSS. Non è una necessità comune? Perché questo non è affrontato nella proprietà 'background-size' di CSS3? – MegaHit

Per quanto ne so, non esiste una soluzione solo CSS per questo. http://www.w3schools.com/cssref/css3_pr_background-size.asp – Bill

@MegaHit Sono d'accordo che sarebbe molto utile, ma è impossibile con i CSS così com'è nel 2014. Javascript o busto, temo. – aaaidan

per ottenere la larghezza/altezza naturale, si potrebbe mettere l'immagine di sfondo in html e nasconderlo, poi prendete l'immagine larghezza/altezza con lo 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');

fonte

2013-03-12 14:55:27 veinmelter

si potrebbe usare Uncle Dave's Ol' Padded Box Technique per questo. Ecco a fiddle showing it in 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%; */ 
}

L'unico problema è che è necessario conoscere la larghezza dell'immagine per farlo funzionare. Se stai utilizzando un preprocessore CSS come Compass, puoi scaricare questo lavoro sul processore invece di farlo manualmente. Look here for information on that.

fonte

2013-03-12 23:37:43 kpeatt

Non voglio ridimensionare il mio contenitore in base all'immagine. Voglio l'immagine in scala con il contenitore. – MegaHit

Non sono sicuro di seguire completamente ciò che desideri. Questo è più in linea con quello che stai pensando? [Fiddle.] (Http://jsfiddle.net/6W3yh/2/) Se hai usato un img invece di uno sfondo CSS, potresti eliminare il div interno. – kpeatt

@kpeatt la soluzione nel tuo commento era esattamente quello che stavo cercando e risolve il problema abbastanza bene :) –

E 'possibile utilizzare questa correzione 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'); 
       } 
      } 
     } 
    });

fonte

2015-08-06 21:58:01 be3

Benvenuto in SO! Cerca di fornire più spiegazioni alle tue risposte. Vedi [Come rispondere alla pagina] (http://stackoverflow.com/help/how-to-answer) per un aiuto nel migliorare la risposta. – Madness

CSS Soluzione: È necessario conoscere l'altezza e la larghezza dell'immagine.

@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; 
}

cui l'URL immagine è https://i.imgur.com/someimage.jpg e la larghezza e l'altezza di questa immagine è rispettivamente 640px e 480px.

fonte

2018-02-13 13:10:49

background-size contiene, ma non scalare fino

risposta

Problemi correlati