Question

假设我的图片有宽度

width: 100vw;

是否可以将标题定位在距离此图像50％的位置？我不能想到如何做到这一点，因为高度会根据vw而改变，所以这可以仅使用CSS，还是需要Javascript？无论哪种方式，我该怎么做？

由于

编辑：我已经尝试了下面的各种建议，但似乎每当我尝试单独使用CSS position:relative时，它会弄乱我的其余代码。因此，是否有一个javascript函数可以将图像的高度计算为页面高度的百分比，然后我可以将我的标题定位在图像高度的75％处吗？

Answer 1

我不完全确定我是否理解你是否正确，但如果你想将一段文字垂直居中于响应图像的顶部，你可以这样做：

div {
  position: relative;
}
img {
  width: 100vw;
  height: auto;
}
p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

<div>
  <img src="https://unsplash.it/200/100/?random">
  <p>SOME TEXT</p>
</div>

https://jsfiddle.net/fjh6msqL/

Answer 2

当然，在图片周围添加一个父母，并将其设置为inline-block，使其与图片的宽度相匹配，添加position: relative，这样您就可以将标题文字与相对于parent，然后使用您的标题文本添加一个元素或使用父项中的伪元素（这是我在此示例中所做的）并绝对从顶部定位50％，并使用translateY(-50%)将图像向上移动50％的高度，使其垂直位于图像中间。这是一篇关于如何使用CSS https://www.w3.org/Style/Examples/007/center.en.html

来集中内容的好文章

＆＃13;

div {
  display: inline-block;
  position: relative;
}
div:after {
  content: 'here is your title';
  color: white;
  background: black;
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
}
img {
  width: 100vw;
}

＆＃13;

<div class="parent">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

＆＃13;

Answer 3

如果不使用某些Javascript，您无法真正使用图片。我认为最好的解决方案是使用div元素并将其background-image属性设置为要显示的图像，然后将标题垂直放置在div中。像这样：

<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
    <h2 class="title"></h2>
</div>

垂直定位可能很棘手，但有一些方法，例如： CSS Vertical align middle

Answer 4

使用CSS margin:auto，具有绝对位置的max-height:0实际上具有魔力。无论屏幕大小如何，这都将使您的标题文本完美居中。我们可以将top，left，right，bottom属性设置为0，而不是给予标题宽度和高度，而实际将元素缩放到其相对父级＆＃39;的大小。希望这会有所帮助。

＆＃13;

body{
margin:0;
padding:0;
}
.img-placeholder{
  position:relative;
}
.img-placeholder img{
  width:100vw;
  height:auto;
}

.img-placeholder h2{
  position:absolute;
  margin:auto;
  top:0;
  right:0;
  bottom:0;
  left:0;
  max-height:0px;
  text-align:center;
}

＆＃13;

<div class="img-placeholder">
      <img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
      <h2>Image Title</h2>
</div>

＆＃13;

CSS将图像定位为另一个图像的百分比

4 个答案: