Вывести подписи на фотографиях

329

24 ноября 2016, 09:53

Подскажите пожалуйста как можно вывести подписи на фото справа внизу вне зависимости от ширины, высоты и выравнивания изображения?

Есть такая разметка, которая генерируется php + js:

<div class="img-wrap">
  <img class="img-left" src="img.jpg">
  <div class="copyright">
    "Иван Иваныч"
  </div>
</div>

На данный момент пока 3 класса для изображений: 1. на всю ширину колонки (700px) без float 2. float left, ширина 350px 3. float right, ширина 350px

Пример необходимого результата:

Answer 1

.img-wrap { 
  position: relative; 
  border: 1px solid #ccc; 
  width: 350px; 
} 
.copyright { 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  padding: 5px 8px; 
  background: #ccc; 
  color: #fff; 
} 
.img-left { 
  max-width: 100%; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
</head> 
 
<body> 
  <div class="img-wrap"> 
    <img class="img-left" src="http://bbeautyworld.ru/wp-content/uploads/2014/06/break_dancing_hedgehog_by_raharris2-d5ww1w6.jpg"> 
 
    <div class="copyright"> 
      Иван Иваныч 
    </div> 
  </div> 
</body> 
 
</html>