更新

Question

我想使用css background-size: contain;属性来拟合背景图像，但是将其部分放在屏幕外。我有一个透明部分的图像，我希望能够操纵＆＃34;填充＆＃34;，所以我认为将背景图像移动到视图中是实现这一目标的好方法：

.bottle {
    background-image: res://bottle_fill;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: 50% 30%;
}

但似乎使用contains参数，图像可能会溢出＆＃34;溢出＆＃34;来自div？我尝试添加overflow: hidden，但它没有帮助。我怎样才能做到这一点？如果没有css方式，JavaScript解决方案就可以了。

更新

https://jsfiddle.net/ghhxddnj/这是一个JSFiddle - 尝试将笑脸放在屏幕的一半，屏幕的一半，同时它的大小为contain。正如一些评论所指出的，我知道这是一个有点奇怪的事情，但背景图像的大小必须与div的内容相同（并且<image>的大小与contains参数一致）原始文件大小相同，因此如果它们都使用包含，它们将会出现相同的大小，我可以将x align设置为居中，然后使用y align来控制瓶子装满了多少。

Answer 1

试试这个：

var image_url = $('#logo').css('background-image'),
    image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // just in case it is not already loaded
    image.src = image_url;
    var imgoffset = image.height;
    $('#logo').css('background-position',-imgoffset)
}

来源：How do I get background image size in jQuery?

编辑： https://jsfiddle.net/ckf55axs/

CSS包含+位置部分屏幕外

更新

1 个答案: