html - 相对位置图片内带有绝对位置文本的响应式 html

Question

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

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

.main {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 0;
  background: linear-gradient(to bottom, #f1b900 0%, #f1b900 50%, #000000 50%, #272660 50%, #272660 100%);
  /* W3C */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow: -3px 0 6px #4a5562;
  -webkit-box-shadow: -3px 0 6px #4a5562;
  box-shadow: -3px 0 6px #4a5562;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  width: 100%;
  transition: all 300ms;
  height: 100%;
}
.folderimg {
  box-sizing: border-box;
  background: url("folder.png") center center no-repeat;
  background-size: contain;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 75%;
  z-index: -1;
}
.foldername {
  -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: 4vmin;
  position: absolute;
  margin-top: 5%;
  margin-left: 12%;
}

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

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/

希望对你有帮助