html - 根据视口(viewport)调整大小的 CSS 色带

Question

一段时间以来，我一直在使用 this创建 Angular 丝带，到目前为止它一直运行良好:

body {
  margin: 10%
}

img {
  border-radius: 0.5vw;
}

.picture {
  position: relative;
}

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png" />
    
</div>

这总是有效，因为功能区标记下方的图像始终具有固定尺寸，因此当调整图像大小时，功能区会一起调整大小并且两者均等地变小(或变大)。

但是，我现在正在重新设计一个 UI，在这个 UI 中我不希望在没有太多控制的情况下缩小或增大内容，因此我将 Bootsrap 用于 Grid 和 vh/ vw 一些其他属性的单位，例如 width、height、border...

这就是这个色带代码的问题。在这种新方法中，当调整视口(viewport)大小时，图像(对于本示例)几乎不会改变其尺寸，但功能区因为是以像素创建的，所以会变得太小(或太大)。

在这里，让我们采用与上面相同的代码，但现在让我们向 img 添加一个 height: 60vh:

body {
  margin: 10%
}

img {
  border-radius: 0.5vw;
  height: 60vh;
}

.picture {
  position: relative;
}

.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

<div class="picture">

    <div class="ribbon ribbon-top-left">
      <span>TEXT</span>
    </div>

    <img src="http://i.imgur.com/5lWqOGT.png" />
    
</div>

现在调整视口(viewport)大小，您会看到。

我试图用 vw/vh 替换原始代码中使用的所有单位，但显然，这还不够 - 或者我做错了 >。 <

那么，是否可以创建这些色带并使它们流畅、灵敏、固定...(抱歉，我不确定这里的术语是否正确)并在像图像一样调整大小时使它们与视口(viewport)成比例？

我已经测试了其他几个代码，但总的来说，所有这些代码都有一个固定尺寸的盒子供功能区使用，就像这个一样。我找到的最接近的是 this pen其中我能够删除它的框尺寸，但是当使用 vh 单元添加图像时，同样的事情发生了。

Answer 1

如果您使用 CSS vh 缩放宽度和位置(因为您已经使用 vh 缩放图像高度)，您可以相应地调整它:

width: 40vh;
top: 9.3vh;
left: -7.7vh;

您可以对 font-size 和 line-height 做同样的事情。请参阅下面的 fiddle 。

演示:JSFiddle