37

我将背景图片设置为contain：

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

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

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

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

4

6 回答 6

6

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

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

if ($('.el').height() < imageHeight) {
  $('.el').css('background-size', 'contain');
}
else {
  $('.el').css('background-size', 'auto');
}
于 2013-03-12T14:51:23.540 回答
3

为此，您可以使用戴夫叔叔的 Ol' Padded Box 技术。这是一个在行动中展示它的小提琴。

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 预处理器，您可以将这项工作卸载到处理器上，而不是手动执行。在此处查找有关该信息的信息。

于 2013-03-12T23:37:43.797 回答
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');
                }
            }
        }
    });
于 2015-08-06T21:58:01.947 回答
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');
于 2013-03-12T14:55:27.697 回答
1

我使用两种方法：

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>

于 2020-03-11T15:28:29.660 回答
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;
}

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

于 2018-02-13T13:10:49.187 回答