background-size 包含，但不放大答案

【问题标题】：background-size contain, but don't scale upbackground-size 包含，但不放大
【发布时间】：2013-03-12 14:13:40
【问题描述】：

我将背景图片设置为contain:

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

但这会放大图像。我希望图像永远不会大于其原始尺寸，并且仅在不适合其原始分辨率时按比例缩小。

这是一个演示：http://jsfiddle.net/6W3yh/

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

【问题讨论】：

一种替代方法是使用 CSS 媒体查询根据与您的图像尺寸相关的不同屏幕尺寸来调整图像的尺寸。
@blachawk - 我理解这一点，但出于多种原因，我试图避免这种情况，其中最重要的是每当图像（尺寸）更新时我都必须更新我的媒体查询:(
如果您决定尝试百分比，这可能不是真的...理论上您未来的图像应该适合。
@blachawk - 我确实尝试过，但我无法让它工作。你能告诉我它是怎么做的吗？我为我的问题添加了一个小提琴。
将max-width:(your max img width) 用于您的.el

标签： html css background

【解决方案1】：

很遗憾，您想要做的事情在 CSS 中是不可能的。

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

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

【讨论】：

我知道如何在 JS 中做到这一点。我正在寻找仅 CSS 的解决方案。这不是普遍的需求吗？为什么 CSS3 background-size 属性中没有解决这个问题？
据我所知，没有 CSS 唯一的解决方案。 w3schools.com/cssref/css3_pr_background-size.asp
@MegaHit 我同意这将非常有用，但对于 2014 年的 CSS 来说，这是不可能的。恐怕是 JavaScript 或破产。

【解决方案2】：

您可以为此使用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.

【讨论】：

我不想根据图像缩放我的容器。我希望图像随容器缩放。
不确定我是否完全按照您的要求。这更符合你的想法吗？ Fiddle. 如果您使用 img 而不是 CSS 背景，您可以取消内部 div。
@kpeatt 您评论中的解决方案正是我想要的，并且很好地解决了问题:)

【解决方案3】：

你可以使用这个 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');
                }
            }
        }
    });

【讨论】：

欢迎来到 SO！尝试为您的答案提供更多解释。请参阅How to answer page 以帮助您改进答案。

【解决方案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');

【讨论】：

【解决方案5】：

我使用两种方法：

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>

【讨论】：

【解决方案6】：

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

其中图片的url是https://i.imgur.com/someimage.jpg，图片的宽度和高度分别是640px和480px。

【讨论】：