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;         
}

这种方式是正确的方法吗？我应该只修复媒体查询还是我应该从头开始覆盖它？

此外，我需要将文本置于图像中心。

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

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

P.S。在代码更新之后，似乎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

Twitter Bootstrap 3文本定位在响应式图像上

1 个答案: