我想给予图像的宽度和高度(300像素; 300像素;)在卡:
<!-- Card Start From Here -->
<div class="card" style="width: 35rem;">
<img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<!-- Card Start From Here -->
字符串
产量缩水:
x1c 0d1x的数据
如果我删除下面的代码行,那么图像将很长,但不会缩小:
style="width:35rem;height:20rem;"
型
我试过:
object-fit:cover;(Check all properties like fill, scale-down)
型
我也试过CSS:
<style>
.clsAutofit{
height:300px;
width:300px;
}
.clsImg{
max-width:100%;
max-height:100%;
}
</style>
<div class="clsAutofit">
<img src="/demo/img/1.jpeg" class="clsImg" />
</div>
<!-- This also not working in card -->
型
我也尝试了一些属性:
<style>
img.one {
display: block;
object-fit: contain;
max-width:500px;
max-height:280px;
width: auto;
height: auto;
}
img.two {
object-fit: contain;
width: 535px;;
height: 535px;
}
.box {
width: 30%;
height: 200px;
border: 5px dashed #f7a239;
}
.containerTY {
width: 60%;
height: 500px;
}
.containerTYZ {
max-width: 100%;
}
.thumbnail {
width: 500px;
height: 400px;
}
.img4R {
width: 100%;
height: auto;
max-width: 50vw;
}
</style>
型
我试过了,但还没能做到。欢迎任何想法或建议。
3条答案
按热度按时间lvmkulzt1#
你的方法是好的.问题是,引导类属性往往有
!important
.所以把你自定义的style.css放在你的bootstrap.css下面,这样它就比bs有更高的优先级,
则用途:
字符串
用
.my-image
类绑定图片,清除inline css styles,检查这个。y53ybaqx2#
字符串
qaxu7uf23#
使用
img-fluid
的图像,你也可以使用w-25 w-50 w-100
的lg
,md
,sm
等设备个字符