[英]HTML CSS Fit image in fixed size
我知道这个话题已经出现了几次,但这些问题的答案都没有解决我的问题。 这就是为什么我在这里问它。 我有一个网站,我有一张标准的 Bootstrap 卡,上面有一个图像,但它看起来像这样
我怎样才能使图像自动适应中间并且看起来不会被拉长?
这是我的 HTML 代码(没有附加 CSS,它的标准引导程序)
<div class="row mt-4">
<div class="col-md-4">
<div class="card mb-4">
<div class="card-image">
<img class="card-img-top" src="images/example.png">
</div>
<div class="card-header">
<h6 class="m-0">Some text</h6>
</div>
<div class="card-body" style="height: 130px">
<p class="m-0">Some text</p>
</div>
<div class="card-footer">
Footer
</div>
</div>
</div>
</div>
最好的办法是将图像用作背景并结合背景封面。 这将允许照片增长和调整大小而不会看起来不稳定。
.card-header { height:200px; background-image:url('http://www.fillmurray.com/g/500/200'); background-size:cover; background-position:center center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row mt-4"> <div class="col-md-4"> <div class="card mb-4"> <div class="card-image"> <img class="card-img-top sr-only" src="images/example.png"> </div> <div class="card-header"> <h6 class="m-0">Some text</h6> </div> <div class="card-body" style="height: 130px"> <p class="m-0">Some text</p> </div> <div class="card-footer"> Footer </div> </div> </div> </div>
将此添加到您的“img”样式中:
img { height: 200px;width:100%;object-fit: cover; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.