我正在尝试以响应方式定位其中包含图像的 div。
我使用的背景图像在调整浏览器大小时保持其纵横比。
我已经使用 %ages 定位了 div，但是当窗口变小时，div 最终移动了过来，而图像刚刚开始被截断。
这是我的例子:http://jsfiddle.net/bbLTD/1/
我的目标是让带有小图像的潜水相对于背景图像保持在同一位置。
我做错了吗？
这是 HTML/CSS:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>laPINA</title>
<style type="text/css">
html {
background: url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div style="position: absolute; bottom: 50%; right: 10%;">
<img src="http://www.friesens.com/wp-content/uploads/2011/10/Contact-UsHeader940x260.jpg" width="50" height="50" alt="contact_logo" />
</div>
</body>
</html>
最佳答案
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>laPINA</title>
<style type="text/css">
html {
background: url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
***img{
width: 100%;
max-width: 50px;
height:100%;
max-height:50px;
}***
</style>
</head>
<body>
<div style="position: absolute; bottom: 50%; right: 10%;">
***<img src="http://www.friesens.com/wp-content/uploads/2011/10/Contact-UsHeader940x260.jpg" alt="contact_logo" />***
</div>
</body>
</html>
我所做的更改以粗斜体显示。您可以根据相对于图像容器的百分比指定图像的高度和宽度，并指定您想要的最大高度和最大宽度。
我已将图像的高度/宽度转移到 css 内部样式表，因为将 css 保留在 html 之外被认为是更好的做法，除非它像您对 div 所做的那样位于特定样式标签中style="position: absolute; bottom: 50%; right: 10%;".
希望这对您有所帮助。
关于css - 响应式地在背景上定位一个 div "cover"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14825683/