html - 图像不会固定在平板电脑屏幕尺寸和更小的中心

Question

我正在尝试修复一个个人网站元素，其中我的图像拒绝以移动/平板电脑屏幕尺寸为中心。我已经尝试了各种自定义 css 但无济于事。我有很多不同大小的媒体查询，但是我找不到任何冲突的样式。我在这个元素上使用 Bootstrap 框架。网址是here .

这是我的html

<div class="about">
  <a name="abouty"></a>
      <h1 class="text-center">About</h1>
      <p class="text-center" id="myth">The man...The myth...The legend</p>
      <article>
        <div class="img-wrap">
          <img id="pic" src=" http://goodedevelopment.com/images/selfie.JPG" alt="A picture of myself,one handsome devil">
        </div>
        <p class="bio">
          Kyle Goode is a young, caffeine dependent, Nashville local. He went to school in a small town just West of Nashville where he met and married his high school sweetheart. It is in that small town that Kyle's passion for technology began.Kyle has been amazed
          with technology and programming even as a child,from trying to read code and quickly realizing he couldn't read the long "words" it was making to taking apart the family computers, much to the chagrin of his parents. Though his adult life has
          been spent in the medical field, Kyle is excited to begin transitioning his hobby and passion to his profession.
        </p>
      </article>

      <div class="container" id="mine">
        <h1 class="text-center" id="kyle">Kyle Goode-the man in bullet points</h1>
        <ul class="text-left" id="profile">
          <li>Good Samaritan</li>
          <li>Prefers puns intended</li>
          <li>Especially gifted napper</li>
          <li>Devoted to both programming and Game of Thrones</li>
          <li>Codes for fun</li>
          <li>Making History</li>
          <li>Goes into survival mode if tickled</li>
          <li>Anxiously awaiting you to connect with him for projects.</li>
        </ul>
      </div>
    </div>

这是我的 CSS，非常感谢您提供的所有帮助。

@media screen and (max-width: 767px)
#pic {
    overflow: auto;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 157px;
    right: 0;
}
@media screen and (max-width: 825px)
#pic {
    width: 119%;
    height: auto;
    position: relative;
    right: -209px;
    top: 229px;
}
@media screen and (max-width: 965px)
#pic {
    width: 130%;
    height: auto;
    position: relative;
    right: -222px;
    top: 264px;
}
@media screen and (max-width: 1040px)
#pic {
    width: 133%;
    height: auto;
    position: relative;
    right: -280px;
    top: 231px;
}
@media screen and (max-width: 1100px)
#pic {
    height: 315%;
    width: auto;
    position: relative;
    right: 400px;
    top: 6px;
}
@media screen and (max-width: 1199px)
#pic {
    width: auto;
    height: 388%;
    position: relative;
    right: 446px;
}
@media screen and (max-width: 1300px)
#pic {
    height: 390%;
    width: auto;
    position: relative;
    right: 436px;
}
@media screen and (max-width: 1450px)
#pic {
    width: 295%;
    height: auto;
}
#pic {
    width: auto;
    height: 348%;
    position: relative;
    top: 10px;
    right: 415px;
}
.img-wrap img {
    width: 100%;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

你已经完成了媒体查询和相对定位。您提到了 Bootstrap，但几乎没有使用任何 Bootstrap 功能。

当涉及到您的关于我部分和使用 Bootstrap 时，我会使用与此类似的标记:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0 col-sm-push-8 col-md-6 col-md-push-0">
      <img class="img-responsive center-block" src="http://placehold.it/600x800/fc0/&text=pic">
    </div>
    <div class="col-xs-12 col-sm-8 col-sm-pull-4 col-md-6 col-md-pull-0">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula elit orci, vitae ultrices ex fringilla vel. Suspendisse potenti. Pellentesque ac nisi quis neque sodales feugiat.</li>
      </ul>
    </div>
  </div>
</div>

以上只是一个演示，您需要调整一些东西以满足您的特定需求，但应该可以让您到达需要的地方。

我用过 column resets , offsetting columns和 column ordering在各种视口(viewport)尺寸下实现所需的布局。