0

我正在尝试响应地定位一个带有图像的 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>
4

1 回答 1

1 
<!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=" 所做的那样位于特定的样式标签中位置：绝对；底部：50%；右侧：10%；"。

希望这可以帮助。

于 2013-02-12T07:37:01.843 回答