html - Twitter Bootstrap 3 文本在响应图像上的定位

Question

我遇到了有关文本在响应式图像上的定位问题。

我有不同尺寸的丝带图片(主要是宽度不同)调整浏览器窗口的大小后，文本会跳出功能区。

.first-block-first-ribbon-text-position{
   transform: translate(-15%, 60%);  /*Actually -15%, 40% works in my project*/
   color: #fff;
   font-weight: 700;
   font-size: 2.0vmin;         
}

对于我以这种方式进行的媒体查询:

.second-block-second-ribbon{
  transform: translate(-15%, 60%); 
  color: #fff;
  font-weight: 700;
  font-size: 2.0vmin;         
}

这样的做法对吗？我应该只修复媒体查询还是应该从头开始覆盖它？

我还需要文本在图像中居中。

现在我很困惑，因为我得到了所有这些方法都是错误的建议......

我需要针对不同浏览器窗口大小的通用解决方案。

附言代码更新后，似乎 JSfiddle 示例有效......但在生产功能区上并没有固定到右上角，文本会跳到我们的位置。 (我可以发布一个实时版本的链接)

我附上了 img 应该如何渲染(看第一部分)。

JSFiddle:https://jsfiddle.net/DTcHh/19252/

IMG:http://i79.fastpic.ru/big/2016/0412/25/d591b9e5a4ee75d82f9db7c609c81425.jpg

Answer 1

基本上，您的事情太多了。为什么要使用 Bootstrap 字幕类？这增加了一些愚蠢的风格。那么，所有这些变换是怎么回事？

我会从一些非常简单的东西开始，然后通过媒体查询增加字体大小。

.ribbon {
    position: relative;
}
.ribbon img {
    width: 100%;
}
.photo-caption {
    position: absolute;
    top: 15px;
    right: 30px;
    bottom: 15px;
    left: 30px;
    color: #fff;
} 

Demo