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

Правильно ли подход таким образом? Должен ли я исправлять медиа-запрос или я должен быть перезаписан с нуля?

Также мне нужно, чтобы текст был центрирован внутри изображений.

Теперь я смущен, потому что у меня есть предположение, что все эти подходы не правы ...

мне нужно универсальное решение для различных размеров окна браузера.

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