在图像上垂直定位元素

Question

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

.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>

Answer 1

尝试使用 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>

在图像上垂直定位元素

Positioning Element vertically responsive over image

css

positioning

rotatetransform

responsive-design