background-size包含但不扩展

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