Question

我正在尝试响应地在其中放置带有图像的div。

如果调整浏览器大小，我正在使用保持其宽高比的背景图像。

我已经使用％age定位了div，但是当窗口变小时，div最终会移动，而图像才开始被切断。

我的目标是让小图像潜水与背景图像保持在同一个位置。

我是否采取了错误的方式？

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

Answer 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 =“position：absolute; bottom：50％; right：10％;”。

希望这有帮助。

响应地在背景“封面”上定位div

1 个答案: