用图像和边框填充具有固定纵横比的 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 来处理这种事情。