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

Question

我想获得这个效果:

图片是高的比宽的。倒长方形的形状太大了。我必须将其缩放到大约 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

Answer 1

尝试下面的代码片段

希望对你有帮助:)

.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>