[英]How do I align different size images
我正在尝试用不同大小的图像编写页面,但无法弄清楚如何正确对齐它们。 网页的外观如下: https : //i.imgur.com/Li17CMl.jpg
我添加了引导img-fluid以提高响应能力。 如果我设置固定高度的图像,将无法在较小的屏幕上正确缩小。
我用“ ...”清除了一些不相关的数据,只是为了使代码看起来更干净。 我当前的代码:
foreach(row...) : ?>
<div class="col-md-6" style="padding...">
<div class="card">
<div class="card-body" style="padding...">
<a href="">
<div>
<img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
我希望图像可以在较小的屏幕上缩小。
TL:DR object-fit: cover;
会成功的
解决方案1-固定高度
使用此解决方案,您必须为图像的高度设置值:照片不会拉伸,但每个屏幕的比例都不同
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
解决方案2-真正的流体
此解决方案比较棘手,但是照片始终具有您选择的比例。
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
请使用以下代码:
.img-card img{width:100%;height:300px;object-fit:cover;} .img-card{margin-bottom:15px;margin-top:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="col-6"> <div class="img-card"> <img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" /> </div> </div> <div class="col-6"> <div class="img-card"> <img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" /> </div> </div> <div class="col-6"> <div class="img-card"> <img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" /> </div> </div> <div class="col-6"> <div class="img-card"> <img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" /> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.