Question

我在网页上使用了背景图片，并在css中使用了这段代码，这样可以在调整浏览器大小时很好地调整大小。

body{   
    background: url("images/back.jpg") no-repeat  ;
    background-size: cover;
}

我需要在特定的地方（桌子上的花瓶）上放置一些其他图像放在背景图像的顶部。但是当我这样做时，背景会调整大小但是当浏览器时花瓶图像保持在相同的位置和相同的大小调整大小，如下图所示。

看到这两个图片中的花瓶

browser in full size

resized browser

如何使花瓶图像也像背景一样调整大小

Answer 1

我最近遇到了完全相同的问题，创建了一个隐藏的对象游戏，无论浏览器尺寸如何，都需要将图像放在背景图像上以保持其位置。

这就是我的所作所为：

您可以将背景图片的模板版本包含为<img> visibility:hidden的实际<div class="image-container"> <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template"> <div class="item"></div> </div>（因此它不可见，但仍会在DOM中占用它的空间）根据它确定大小（和背景图像大小）。

<强> HTML：

/* This is your container with the background image */
.image-container {
    background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
    background-size:100%;
    overflow-x: hidden;
  position:relative;
}

/* This is the template that resizes the DIV based on background image size */
img.img-template {
    visibility: hidden;
    width:100%;
    height:auto;
}

/* This is the item you want to place (plant pot) */
.item {
    position: absolute;
    left: 14.6%;
    bottom: 80.3%;
    width: 15%;
    height: 15%;
    background: yellow;
    border: 2px solid black;
}

<强> CSS：

PYTHONSTARTUP

以下是一个工作示例：http://jsfiddle.net/cfjbF/3/

Answer 2

尝试制作图像相对位置并手动设置对齐。

http://jsfiddle.net/cfjbF/1/

<head>
    <style>
        body {
            background: #000000;
        }

        #image1 {
            background: #008000;
            position: relative;
            left: 50px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<div id="image1"></div>
</body>

Answer 3

解决您的问题：

https://stackoverflow.com/a/7660978/1256403

OR

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

调整浏览器大小时CSS图像变小

3 个答案: