Html 如何使用CSS使图像始终相对于div_Html_Css

Html 如何使用CSS使图像始终相对于div

html css

Html 如何使用CSS使图像始终相对于div,html,css,Html,Css,我有一个问题与登录表单，当浏览器窗口得到较小的图像，是出现在头部的登录表单停止显示正确正确视图：更改浏览器窗口大小时： html代码： <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description"

我有一个问题与登录表单，当浏览器窗口得到较小的图像，是出现在头部的登录表单停止显示正确正确视图：

更改浏览器窗口大小时：

html代码：

<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="login panel">
    <meta name="author" content="WhiteOne">

    <title>Login</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

            <!-- Custom CSS -->
    <link href="css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- icon location -->
    <link rel="stylesheet" type="text/css" href="styles/icon.css" />
    <!-- Set Full Background -->
    <link rel="stylesheet" type="text/css" href="styles/background.css" />
    <link rel="stylesheet" type="text/css" href="styles/icon-login.css" />

    </head>
<body>

    <div style="margin: 100px auto 0 auto;">
    <div class="container">
        <div class="row">
        <!-- login box start -->
            <div class="col-md-4 col-md-offset-4"  id="loginbox">

                            <div class="login-panel panel panel-default">

                    <div class="panel-heading">
                    <img src="icons/Instagram.png" id="instagram-login">
                    <img src="icons/Twitter-icon.png" id="twitter-login">
                    <img src="icons/Facebook-icon.png" id="Fb-login">

                    <h3 class="panel-title" >Please Sign In</h3>

                    </div>

                    <div class="panel-body">
                        <form role="form" method="post" action="">
                            <fieldset>
                                <div class="form-group">
                    <span class=usericon>            
                <i class="fa fa-user"></i>
                </span>
                                 <input class="form-control" id="username" placeholder="Username" name="username" type="text" autofocus required>

                </div>

                                                                <div class="form-group">
                                                                    <span class="passwordicon">
                                <i class="fa fa-lock"></i>
                                </span>
                                <input class="form-control" id="password" placeholder="Password" name="password" type="password" value="" required>
                                                              </div>

                                <input type="submit" name="Login" value="login" class="btn btn-lg btn-success btn-block" id="login">

                                                            </fieldset>
                        </form>

                    </div>
                </div>

            </div><!-- End of login box -->
</div><!-- end of row class -->
</div><!-- end of container -->

</body>

</html>

我尝试相对于面板标题而不是固定标题，但它也不起作用。

Put

position:relative#loginbox

上使用code>，它会将图像保存在loginbox内，而不是保存在loginbox外
然后尝试管理较小的左-右-上-下
参数，因为对于#loginbox
，您定义的这些参数将不适用。您定义的是用于.container
，因为它已定义了位置。
首先，将标题放在图像之前，并正确排列图像
<div class="panel-heading">
<h3 class="panel-title" >Please Sign In</h3>
<img src="icons/Facebook-icon.png" id="Fb-login">
<img src="icons/Twitter-icon.png" id="twitter-login">
<img src="icons/Instagram.png" id="instagram-login">
</div>

这是一个基于你该死的图片的粗略猜测。
你应该做的第一件事是将图片扭曲成一个链接，然后使用social类将所有链接包装成一个div
<div class="social">
        <a href="#"><img src="Instagram.png"></a>
        <a href="#"><img src="Twitter-icon.png"></a>
        <a href="#"><img src="Facebook-icon.png"></a>
</div>

然后，您可以将这些样式应用于社交div
.social img {
    width: 50px;
}

.social a {
    display: inline-block;
    float: right;
}

.social {
    position: absolute;
    right: 13px;
    top: 0;
}

如果你做一个jsfiddle会有帮助。也就是说，我非常确定您需要将position:relative应用于.panelheading，position:absolute应用于您的图像。@RMo谢谢，请再次检查CSS代码（我根据您的建议进行了更新），但仍然会出现相同的问题。是否查找类似的内容？如果是这样，我将添加一个更详细的答案，如果不是，什么行为不是你想要的？不，问题正如我上面描述的：当我更改浏览器窗口大小时，社交图标没有停留在面板标题div中，它们将是这样的例如：在示例中不会发生这种情况。也许你更容易看到效果。
<div class="social">
        <a href="#"><img src="Instagram.png"></a>
        <a href="#"><img src="Twitter-icon.png"></a>
        <a href="#"><img src="Facebook-icon.png"></a>
</div>

#loginbox {
  position: relative;
}

.social img {
    width: 50px;
}

.social a {
    display: inline-block;
    float: right;
}

.social {
    position: absolute;
    right: 13px;
    top: 0;
}