Question

我正在尝试做的是，HTML页面分为两种颜色和在中间和顶部放置一个可调整大小的图像，显示一些定位文本。

我设法做到了，但问题是当我调整窗口大小时，图像调整得很好，但文本div失去了它的位置。

<div class="main">
  <div class="folderimg">
    <div class="foldername">Test Username</div>
  </div>
</div>

{{1}}

jsfiddle

一些帮助真的很明显......

Answer 1

使用img标签代替background-image，我们可以按照img标签的大小设置容器标签的大小。

<强> HTML

<div class="main">
  <div class="folder">
    <img src="https://s22.postimg.org/qi3kmv39d/folder.png">
    <div class="foldername">Test Username</div>
  </div>
</div>

<强> CSS

.main {
  /*...*/
  display: flex;
  align-items: center;
}
.folder {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.folder img {
  display: block;
  height: auto;
  width: auto;
  max-width: 50vw;
  max-height: 50vh;
}
.foldername {
  position: absolute;
  top: 5%;
  left: 5%;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-55eg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  font-size: 3vmin;
}

试试这个：

http://jsfiddle.net/w1om0h0o/2/

希望它可以提供帮助

响应式html与相对位置图片内的绝对位置文本

1 个答案: