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时，我会使用与此类似的标记：

＆＃13;

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

＆＃13;

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

我已使用column resets，offsetting columns和column ordering在各种视口尺寸下实现所需的布局。

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

1 个答案: