用固定的宽高比填充div和图片和边框

时间:2018-06-25 11:56:27

标签: html css html5 image css3

我正在尝试通过向图像添加边框来在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来解决此问题。

1 个答案:

答案 0 :(得分:0)

将CSS背景图片用于此类操作。