Question

我将背景图片设置为contain：

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

但是这可以扩大图像。我希望图像永远不会超过其原生尺寸，只有当它不适合其原始分辨率时才缩小。

以下是演示：http://jsfiddle.net/6W3yh/

我正在寻找CSS解决方案请不要使用JavaScript。

Answer 1

不幸的是，你不想在CSS中做什么。

最好的办法是使用Javascript设置背景大小。但是，如果您希望图像在容器小于它时缩小，则必须能够检索图像的自然高度。

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

Answer 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');
                }
            }
        }
    });

Answer 3

您可以使用Uncle Dave's Ol' Padded Box Technique。这是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%; */
}

唯一的问题是，您需要知道图像的宽度才能使其正常工作。如果您正在使用像Compass这样的CSS预处理器，您可以将此工作卸载到处理器上而不是手动执行。 Look here for information on that

Answer 4

要获得自然宽度/高度，您可以将背景图像放在html中并隐藏它，然后使用脚本抓取图像宽度/高度。

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');

Answer 5

CSS解决方案：您需要知道图像的高度和宽度。

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

图片网址为https://i.imgur.com/someimage.jpg，图片的宽度和高度分别为640px和480px。

Answer 6

我使用两种方法：

1-对象拟合

它具有良好的浏览器支持：https://caniuse.com/#feat=object-fit

.container {
  position: relative;
  width: 200px;
  height: 200px;
  /* Just for style */
  display: inline-block;
  background: rgba(0,0,0,0.2);
  margin: 10px;
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

<div class="container">
  <img src="https://picsum.photos/300/200">
</div>

<div class="container">
  <img src="https://picsum.photos/200/300">
</div>

<div class="container">
  <img src="https://picsum.photos/100/100">
</div>

2-位置和变换

当您需要定位较旧的浏览器时，这同样适用，并且无需更改标记

.container {
  position: relative;
  width: 200px;
  height: 200px;
  /* Just for style */
  display: inline-block;
  background: rgba(0,0,0,0.2);
  margin: 10px;
}
.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <img src="https://picsum.photos/300/200">
</div>

<div class="container">
  <img src="https://picsum.photos/200/300">
</div>

<div class="container">
  <img src="https://picsum.photos/100/100">
</div>

background-size包含但不扩展

6 个答案:

1-对象拟合

2-位置和变换