定位元素垂直响应图像

如何解决定位元素垂直响应图像

如何让这个绿色文本带贴在图片的左侧，这样即使图片尺寸响应缩小，它也会在那里？

.wrapper {
  max-width: 600px;
  margin: 100px auto;
}
.img-wrapper {
  position: relative;
  padding-top: 56.25%;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  width: 100%;
  transform: rotate(-90deg);
  background-color: #00ff00;
  transform-origin: center;
}

<div class="wrapper">
    <div class="img-wrapper">
        <img src="http://lorempixel.com/640/480/sports/" alt="" />
        <span class="img-label">Some Text</span>
    </div>
</div>

解决方法

尝试使用 transform-origin:0% 0% 并从 span 中删除 top 属性。也将 img 中的 top:0 更改为 bottom:0

.wrapper {
  max-width: 600px;
  margin: 100px auto;
}
.img-wrapper {
  position: relative;
  padding-top: 56.25%;
}
img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
span {
  position: absolute;
  left: 0px;
  padding: 10px;
  width: 100%;
  transform: rotate(-90deg);
  background-color: #00ff00;
  transform-origin: 0% 0%;
}

<div class="wrapper">
    <div class="img-wrapper">
        <img src="http://lorempixel.com/640/480/sports/" alt="" />
        <span class="img-label">Some Text</span>
    </div>
</div>