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

【问题标题】：CSS image to become smaller when browser is resized调整浏览器大小时 CSS 图像变小
【发布时间】：2012-10-25 06:55:08
【问题描述】：

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

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

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

看这两张图片中的花瓶

browser in full size

resized browser

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

【问题讨论】：

你的图片使用的是什么 css？
把两张图片合成一张怎么样？
比利有一个鼠标悬停可以改变花瓶的颜色，这就是为什么它必须是另一个图像
Asad 我正在使用它，但我也尝试更改为相对但没有帮助 #img1{ height: 167px;宽度：163px；背景尺寸：100% 自动；左：500px；顶部：210px；位置：绝对； }

标签： css fluid-layout

【解决方案1】：

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

这是我所做的：

您可以将背景图像的模板版本包含为实际的<img> 和visibility:hidden（因此它不可见，但仍会占用 DOM 中的空间，并以此为基础确定大小（和背景图像大小） .

HTML：

<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>

CSS：

/* 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;
}

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

【讨论】：

【解决方案2】：

您的问题的解决方案：

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

或

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

【讨论】：

【解决方案3】：

尝试使图像相对位置并手动设置对齐方式。

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>

【讨论】：