Background-size содержат, но не расширяются

Я установил фоновое изображение на contain:

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

Но это масштабирует изображение вверх. Я хочу, чтобы изображение никогда не превышало его собственные размеры и уменьшалось только тогда, когда оно не соответствовало его собственному разрешению.

Вот демо: http://jsfiddle.net/6W3yh/

Я ищу решение только в CSS.
Нет JavaScript, пожалуйста.

Ответ 1

К сожалению, то, что вы хотите сделать, невозможно в CSS.

Лучше всего установить размер фона с помощью Javascript. Однако, если вы хотите, чтобы изображение уменьшалось, если контейнер меньше его, вам нужно будет получить естественную высоту изображения.

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

Ответ 2

Вы можете использовать это исправление 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

Чтобы получить естественную ширину/высоту, вы можете поместить фоновое изображение в html и скрыть его, а затем захватить ширину/высоту изображения с помощью 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');

Ответ 4

Для этого вы можете использовать "Дядя Дэйв Ол" . Здесь скрипка, показывающая его в действии.

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%; */
}

Единственная проблема заключается в том, что вам нужно знать ширину вашего изображения, чтобы это работало. Если вы используете препроцессор CSS, такой как Compass, вы можете разгрузить эту работу на процессор вместо того, чтобы делать это вручную. Посмотрите здесь информацию об этом.