заполнить div с фиксированным соотношением сторон изображения и границ

Question

Я пытаюсь заполнить div с помощью img внутри div, добавив границы к изображению.

Общая структура выглядит следующим образом:

<div class="teaseritem">
  <a href="20180427_Feedback/index.html" class="teaserlink" title="Zur Detailansicht von ">
    <p class="category">some category</p>               
    <img src="../../pool/images/program/20180427_Feedback.png" class="img-responsive img-hover" alt="20180427_Feedback">
    <p class="date">some date</p>
    <h3>some headline</h3>
  </a>
</div>

CSS:

.teaser .flexbox .teaseritem a {
  display: block;
}
p.category {
  background-color: #222222;
  color: #f5f6f5;
  position: relative;
  padding: 7.5px 0 7.5px 15px;
}
.teaser .flexbox .teaseritem a .img-responsive {
  width: 100%;
  max-width: 100%;
  display: block;
  height: auto;
  vertical-align: middle;
}

(надеюсь, я получил все соответствующие правила CSS.)

У div всегда должно быть соотношение сторон 1: 1.Поэтому границы должны быть добавлены влево / вправо или внизу / вверху в зависимости от соотношения сторон исходных материалов.

К сожалению, я не могу установить ширину элемента div для определенного значения в пикселях, поскольку общий размер зависит от экранаразрешающая способность.Я пытаюсь избежать использования Javascript для решения этой проблемы.

Answer 1

Используйте CSS background-image для такого рода вещей.