如何使用CSS使图像始终相对于div
如何使用CSS使图像始终相对于div
提问于 2014-10-30 15:39:27
我有一个登录表单的问题，当浏览器窗口获得较小的图像时，出现在登录表单的头上，停止正确显示。正确视图： http://im87.gulfup.com/bYOI29.png
更改浏览器窗口大小时的： http://im59.gulfup.com/95cyji.jpg
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>社会图标位置的css代码:图标-login.css
#instagram-login {
left: 250px;
opacity: 0.95;
position: absolute;
top: -16px;
}
#instagram-login:hover {
opacity: 1;
}
#twitter-login {
left: 195px;
opacity: 0.925;
position: absolute;
top: -12px;
}
#twitter-login:hover {
opacity: 1;
}
#Fb-login {
left: 140px;
opacity: 0.92;
position: absolute;
top: -12px;
}
#Fb-login:hover {
opacity: 1;
}
.panel-heading {
position: relative;
}我试着用面板标题代替固定标题，但它也不起作用。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-30 21:31:24
您应该做的第一件事是扭曲链接中的图像，然后将所有链接包装在一个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 (#loginbox)以下内容：
#loginbox {
position: relative;
}然后，您可以将这些样式应用到社交div中。
.social img {
width: 50px;
}
.social a {
display: inline-block;
float: right;
}
.social {
position: absolute;
right: 13px;
top: 0;
}Stack Overflow用户
发布于 2014-10-30 15:51:29
将position: relative;放在您的#loginbox上，它会将图像保存在loginbox中，而不是不在其中。
然后尝试管理较小的left right top bottom参数，因为对于#loginbox，您定义的这些参数将不适合。您定义的是.container，因为它定义了position。
Stack Overflow用户
发布于 2014-10-30 17:43:10
首先，把标题放在图片之前，并正确地排列你的图像。
<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>接下来，应用以下样式：
.panel-heading {
width: 400px; // make sure this width is big enough to contain the title and the flags
}
.panel-title {
display: inline-block;
width: 90px; // adjust the width so it's proper, I'm making rough guesses based on what I see
}
#Fb-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
}
#twitter-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}
#instagram-login {
position: relative;
display: inline-block;
width: 80px; // guessing the size again
height: 110px; // still guessing
top: -20px;
left: -50px;
}这是基于你该死的图像的粗略猜测。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26657330
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号