在网站上格式化图像以显示为标题

Question

这是我正在使用的网站：

http://btwnthelin.es/

我要渲染下图：

所以它会显示在着陆页的顶部，但是我现在把它放在页面的中间，而且尺寸非常错误。

也许我应该使用 CSS？

我该如何解决这个问题？

我正在使用模板 'fullpage.js'

这是我的 index.html 页面的样子：

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    css3: true
  });
});

.section {
  font-size: 6em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="fullpage">
    <div class="section">
      <img alt="My Image" src='bwn_the_lines.png' style="width:900px;height:300px" />
    </div>
    <div class="section">
      <div class="slide">Wusch</div>
      <div class="slide">up</div>
      <div class="slide">dude?</div>
    </div>
    <div class="section">:D</div>
  </div>
</body>

Answer 1

您应该从 .fp-tableCell 中删除 vertical-align: middle; 会将您的图片放在页面顶部。

和第二期"sizing is terribly wrong"。因为你的图片给了height: 300px; width: 900px;。只需将其删除并按原样高度和宽度放置即可。

希望对您有所帮助。

Answer 2

所做的更改：我将 class 添加到此代码段中的 div，因为它在您的网站中。其次，我将 css 属性添加到 div。

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    css3: true
  });
});

.section {
  font-size: 6em;
  text-align: center;
}
.fp-tableCell {
  position: absolute;
  left: 50%;
  margin-top: -30px;
  margin-left: -450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="fullpage">
    <div class="fp-tableCell">
      <img alt="My Image" src='http://i.stack.imgur.com/7ubFp.png' style="width:900px;height:300px" />
    </div>
    <div class="section">
      <div class="slide">Wusch</div>
      <div class="slide">up</div>
      <div class="slide">dude?</div>
    </div>
    <div class="section">:D</div>
  </div>
</body>

在网站上格式化图像以显示为标题

Format an image on a website to display as a title

html

javascript

css

fullpage.js