html - Blog List Div - 解决CSS

Question

我已经创建了用于列出程序的 CSS(如博客列表)。但是，我的代码存在一些我无法更正的问题。下面是一段代码

<div class='customHeight'>
  <div class='container'>
    <div class='row'>
      <div class='col-sm-3 custom'>
        <img src='images/thumb_yoganidra.jpg' class='myImage' height='100'>
        <div class='dateHolder1'>".$c_dur."
          <br>Days</div>
      </div>
      <div class='col-sm-9 custom2'>
        <div class='row '>
          <h2>".$row['program']." |  ".$row['info']."</h2>
        </div>
        <div class='row bottomGap'><i class='fa fa-map-marker fa-lg'></i><font size='+1' color='#9E5E00'><em> Venue : Karama & Deira</em></font> / <i class='fa fa-calendar'></i><font size='3' color='#663333'> Starts : ".$sta."</font>  <i class='fa fa-calendar'></i><font size='3' color='#663333'> Ends : ".$end."</font> 
        </div>
        <div class='row bottomGap'>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
        </div>
        <div class='row'>
          <a href='viewprogramme.php?id=".$row[' pid ']."' role='button' class='btn btn-margin btn-warning  '><i class='fa fa-info-circle fa-lg'></i> &nbsp;View Programme</a><a href='#' role='button' class='btn btn-margin btn-success  '><i class='fa fa-check-circle fa-lg'></i> &nbsp;Apply</a>
          <a
          href='viewprogramme.php?id=".$row[' pid ']."' role='button' class='btn btn-margin btn-info  '><i class='fa fa-clock-o fa-lg'></i> &nbsp;Schedule</a>
        </div>
      </div>
    </div>
  </div>
</div>

相同的 CSS

*
.bottomGap{ margin-bottom:5px; }

.custom {
    background-color: #ccc;
    height:200px; 
}
.custom2 {
    padding-left:30px; 
}

.customHeight{
 height:200px;
 margin-bottom:20px;   

}
.dateHolder1{
    height:80px;
    width:50px;
    background-color:#F29300;
    padding-top:10px;
    text-align:center;
    position: absolute; 
}
.imgbox{
    height:200px;
    width:200px;
}

#myImage {
    zoom: 1;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: 100%;
    max-width: 100%;
}

我希望博客图像填充到容器中(即 col-sm-3 :Bootstrap CSS)。但它超过了专栏。另外，我想在图像上叠加 dateHolder1。

我正在发布当前的屏幕截图

我需要的东西

当我使用大图像时它看起来像什么。它超过了 bootstrap col-sm-3 div，即使我设置了 width = 100%。我如何用图像填充容器(如果缩放没问题，但想保持纵横比)

Answer 1

首先，您需要在要填充的 div 中使用图形作为背景(而不是图像)。

然后，由于我假设您想制作可重复的动态博客列表项，您可以将背景图像添加为内联样式。

所以，CSS 添加..

.custom {
background-size: cover;
}

HTML 更改...

...
<div class='col-sm-3 custom' style="background-image: url('images/thumb_yoganidra.jpg');"  >
     <div class='dateHolder1'>".$c_dur."
      <br>Days</div>
</div>
...