由于样式的原因，卡片中的图像显示非常差(Bootstrap 4)
由于样式的原因，卡片中的图像显示非常差(Bootstrap 4)
提问于 2019-05-27 17:36:30
如果您上传的图像具有较高的高度和较小的宽度，那么它在卡片(用户卡片)中的显示效果会非常差。下面是HTML和css部分。我们使用的是Angular：
HTML
<div class="container-fluid" >
<div class="row people-row">
<div class="col-12 row">
<div class="m1-* col-md-3 text-center" *ngFor="let user of filteredUsers | filter: searchByKeyword: 'name' | paginate: { itemsPerPage: 12, currentPage: p }">
<div class="card card-person">
<a (click)="ViewUser(user)">
<img class="card-img-top" src="http://res.cloudinary.com/dfg5p1pww/image/upload/v{{user.picVersion}}/{{user.picId}}"
alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title"> {{user.firstName}} {{user.lastName}}</h4>
<p class="card-text">{{user.age}}</p>
<p class="card-text">{{user.country}},{{user.city}}</p>
<p class="material-icons" *ngIf="CheckIfOnline(user.username)">online</p>
<a class="btn button-image closeButton btn-message" [routerLink]="['/chat', user.username]">Message</a>
</div>
</a>
</div>
</div>
</div>CSS
.card-img-top {
position: relative;
overflow: hidden;
height: 200px;
width: auto
}
.card-person {
margin: 50px auto;
background-color: #ffffff;
border-radius: 0;
border: 0;
box-shadow: 1em 1em 2em rgba(0,0,0,.2);
}
.card-text {
margin-bottom:0.2rem
}
.btn-match,
.btn-message {
color:#ffffff;
background: #FF512F; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FF512F, #DD2476); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FF512F, #DD2476); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transition: all .4s;
margin:5px;
border-radius:40px
}
.button-image:before {
content: "";
width: 23px;
height: 23px;
display: inline-block;
background-size: 100%;
vertical-align: text-top;
background-color: transparent;
background-position : center center;
background-repeat:no-repeat;
}
.btn-match.closeButton:before{
background-image : url('../../../assets/images/heart-white.png');
}
.btn-message.closeButton:before{
background-image : url('../../../assets/images/chat-white.png');
}
a.fill {
width: 100%;
height: 50px;
}是什么导致了这样的问题?如何在Bootstrap 4中修复这个问题，以便所有类型的图像看起来都是正常的？
回答 2
Stack Overflow用户
发布于 2019-05-28 00:53:42
该问题是由background-size CSS属性引起的。当设置为100%时，浏览器将尝试拉伸背景图像以在两个方向上填充容器。
背景大小属性接受几个“关键字”输入以及百分比或像素大小。
background-size:cover将使最小大小的图像填充容器，并隐藏剩余的图像“溢出”。
background-size:contain将使图像的最大部分在容器中填充任何多余的"letterbox“效果。
然后，您可以使用background-position来定义多余的内容被剪切的位置，或者容器的哪一部分被公开。
body {
font-family: Arial, Helvetica, Sans-Serif;
}
img {
width: 250px;
}
hr {
margin: 20px 0;
}
div {
position: relative;
width: 300px;
height: 300px;
margin-bottom: 20px;
border: 1px solid #dadada;
background-image: url(https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
background-color: blue;
background-position: center center;
background-repeat: no-repeat;
}
span {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
text-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
.pos {
background-position: top left;
}<img src="https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" />
<p>Image from Unsplash</p>
<hr />
<div class="cover">
<span>background-size:cover</span>
</div>
<div class="contain">
<span>background-size:contain</span>
</div>
<div class="cover pos">
<span>Cover + background-position: left top</span>
</div>
<div class="contain pos">
<span>Contain + background-position: left top</span>
</div>
Stack Overflow用户
发布于 2019-05-28 01:39:47
如果我没记错，您使用的是.card-img-top，因此添加类.card-person.card-img-top
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56323404
复制相关文章
相似问题