背景大小为contain，但不进行缩放。

Question

背景大小为contain，但不进行缩放。

41

我将背景图片设置为contain：

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

但是这会将图像放大。我希望图像永远不会比其本机尺寸大，并且只有在其本机分辨率下无法适合时才会缩小。

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

我只想用CSS解决方案。
请不要使用JavaScript。

- MegaHit

一种选择是使用CSS媒体查询来根据相对于图像大小的不同屏幕尺寸调整图像的尺寸。 - klewis

如果您决定尝试百分比，这可能并不正确... 理论上，您的未来图像应该适合。 - klewis

@blachawk - 我尝试过了，但是我没能让它工作。你能给我展示一下怎么做吗？我在我的问题中添加了一个 fiddle。 - MegaHit

在CSS中没有其他选项。这里的选择非常有限，使用js吧。 - otinanai

我完全理解你在这里想要什么。我需要它用于画廊。拥有一个使用contain构建的全屏幻灯片画廊将是很棒的，但不会拉伸图像。CSS应该真正拥有一个background-scale属性，然后保留background-size属性以前包含/覆盖出现的内容。 - Drew Baker

显示剩余4条评论

6个回答

3

你可以使用大卫叔叔的旧垫盒技术来做这件事。这里有一个展示它如何运作的小提琴视频。

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预处理器，你可以把这个工作卸载到处理器上，而不是手动完成。在这里查看相关信息。

- kpeatt

我不想根据图像来缩放容器，我希望图像随着容器的缩放而缩放。 - MegaHit

1

不确定我完全理解你想要什么。这是否更符合您的想法？Fiddle. 如果您使用img而不是CSS背景，您可以省去内部div。 - kpeatt

@kpeatt，你在评论中提供的解决方案正是我正在寻找的，而且解决了问题，非常好 :) - Ria Weyprecht

2

我会用两种方法：

1 - Object-Fit

这个方法在浏览器上有很好的支持：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>

- oodavid

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

- be3

4

欢迎来到SO！尽量提供更多解释来支持你的回答。请参考如何回答页面以获取帮助，改进你的回答。 - Madness

1

为了获取自然的宽度/高度，你可以将背景图像放在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');

- veinmelter

0

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。

- see

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bill · Accepted Answer

很遗憾，CSS无法实现您想要的功能。

最好的方法是使用JavaScript设置背景大小。但是，如果您希望图像在容器小于其大小时缩小，则必须能够获取图像的自然高度。

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