我想获得这个效果:
图片是高的比宽的。倒长方形的形状太大了。我必须将其缩放到大约 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');}
问题是照片缩小了,但缩小后的区域没有变化。
我必须获得此效果,但我从 API https://images.punkapi.com/v2/8.png 获得此图像或这张图片 https://images.punkapi.com/v2/keg.png
最佳答案
尝试下面的代码片段
希望对你有帮助:)
.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>
关于html - 页面上三列带有图像的方形卡片 - angular2,bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47794281/