Question

我刚刚开始使用bootstrap，当我调整浏览器大小时，我的图像移位不正确。保存我的图像和文本的背景图像似乎也没有缩放。当我最大化我的浏览器时，一切都已到位且完美。正如您在第一张图片中看到的那样，这就是我的问题所在。第二个图像是它看起来最大化的方式以及它应该如何适应所有屏幕尺寸。任何帮助表示赞赏！

enter image description here

  <!DOCTYPE html>

  <html lang="en">
  <head>
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
  </head>

   <body>
  <div class="container">
    <header>

        <div id="rainbow"><img alt="rainbow gradient" src=
        "images/rainbow.png"></div>

        <div id="header">
            <!--home-->

            <p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
            "images/logo.png" class="img-responsive"></p>
        </div>

        <div id="nav-bar">
            <nav class="nav">

                <ul class="list-inline">
                    <li>
                        <a href="index.html" id="home">Home</a>
                    </li>

                    <li>
                        <a class="gray" href="work.html">Work</a>
                    </li>

                    <li>
                        <a class="gray" href="gallery.html">Gallery</a>
                    </li>

                    <li>
                        <a class="gray" href="hireme.html">Hire!</a>
                    </li>
                </ul>

            </nav>
        </div>
    </header>
   <div class="row">
       <div class="about-me row">

            <div class="col-md-12">
                <img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
                "images/pic.png">

                <p class="about-text">I am a physical comedian, continuously
                being inspired by comical characters and exaggerated
                movement. I fuse elements of dance and theatre to create
                performances that are somewhat over-the-top, and
                outrageous. I use locking technique as a foundation build
                and produce uproarious performances suitable for an
                eclectic audience. I aim to leave audience members feeling
                uplifted, swimming in their own tears of laughter,
                momentarily forgetting any worries or woes.</p>
            </div><!--End of col-md-12 about me-->
        </div><!--End of about me row-->
    </div><!--End of about me wrapper-->


  /********************************
    Body of page
  *********************************/

     html,
     body {
background-image: url(images/background.png);
margin: 0 auto;
   }

#container{
width: 960px;
margin: 0 auto;
}
 /********************************
 Header
*********************************/
#rainbow img{
margin-bottom: 15px;
 }

#logo img {
width: 320px;
 }

 /********************************
 Navigation
 *********************************/
 nav a {
font-family: Hobo Std;
padding: 50px;
}
 ul {
list-style-type: none;
}
 nav {
text-align: center;
margin-left: 20px;


 }

 a {
text-decoration: none;
 }
 nav li {
 display: inline;
 width: 150px;
 }
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
 }

#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}

   ul.list-inline{
  margin-top: 25px;
  }

 /********************************
 About Me
*********************************/

 img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;

 }

.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
 }


p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;

 }

Answer 1

似乎这是在图像的顶部添加74px：

img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}

尝试删除margin-top代码，看看会发生什么。如果桌面需要，您可以添加媒体查询，以便在调整大小时将其删除。例如：

@media and (max-width:700px) {
   img#pic {
      margin-top: 0;
   }
}

如果这不起作用，请告诉我。

Bootstrap - 在调整浏览器大小时，图像不断移位

1 个答案: