我正在尝试通过向图像添加边框来在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来解决此问题。
答案 0 :(得分:0)
将CSS背景图片用于此类操作。