页面上的三列方形卡片，带有图像 - angular2，bootstrap答案

【问题标题】：square cards on the page in three columns with image - angular2, bootstrap页面上的三列方形卡片，带有图像 - angular2，bootstrap
【发布时间】：2018-05-27 10:00:41
【问题描述】：

我想获得这个效果：

图片高于较宽。在倒矩形的形状和太大。我必须将其缩放到 20% 左右。

我创建了这段代码：

<div class="container">
  <div class="row">
      <div class="col-4" *ngFor="let product of getData">
          <div class="card" >
                <img class="card-img-top" src="{{product.image_url}}" alt="Card image cap" />
                <div class="card-block">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
      </div>
    </div>

.card-img-top {

-webkit-transform: scale(0.2); /* Saf3.1+, Chrome */
-moz-transform: scale(0.2); /* FF3.5+ */
 -ms-transform: scale(0.2); /* IE9 */
  -o-transform: scale(0.2); /* Opera 10.5+ */
     transform: scale(0.2);
        /* IE6–IE9 */
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');}

问题是照片缩小了，但后面的区域保持不变。

编辑：i have to delete it

我必须获得这种效果，但我从 API https://images.punkapi.com/v2/8.png 或此图像 https://images.punkapi.com/v2/keg.png 获得此图像

【问题讨论】：

标签： html css twitter-bootstrap angular2-template

【解决方案1】：

试试下面的代码 sn -p

希望对你有帮助:)

.container
{
   margin:5px 5px 5px 5px;
   width:auto;
   height:auto;
   position:relative;
   overflow:hidden;
   border:solid;
   overflow: auto;
   float:left;
}

<div id="container" class="container">
<div class="card">
                <img class="card-img-top" style="Width:60px;height:60px;margin:5px 5px 1px 25px;" src="https://images.cdn3.stockunlimited.net/clipart/mobile-phone-icon-with-notification_1946673.jpg" alt="Card image cap" />
                <div class="card-block">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">Some quick example<br/> text to  build on the card title<br/> and make up the bulk<br/>  of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
</div>
</div>
<div id="container1" class="container">
<div class="card" >
                 <img class="card-img-top" style="Width:60px;height:60px;margin:5px 5px 5px 5px;" src="https://images.cdn3.stockunlimited.net/clipart/mobile-phone-icon-with-notification_1946673.jpg" alt="Card image cap" />
                <div class="card-block">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">Some quick example<br/> text to  build on the card title<br/> and make up the bulk<br/>  of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>

</div>

【讨论】：