我有一个网页,其中包含的图像在Bootstrap卡,但他们中的一些在横向和一些在肖像,所以我如何强制所有的图像显示在纵向最好只使用css或bootstrap 4或html5。
下面是我的代码:
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
<img src="images/1.jpeg" alt="image" class="card-img-top img-responsive">
</div>
发布于 2018-09-29 07:29:53
这将需要使用div元素进行某种形式的裁剪。如果不看网站,很难准确地说出你想要什么,但这里有一个潜在的解决方案,使用height:0;
和百分比padding-bottom
来创建具有固定纵横比的div,然后使用背景图像而不是图像。
如果你想继续使用图片,你需要使用Javascript或者新的object-fit
CSS属性,但是IE不支持object-fit
。
.portrait {
height:0;
padding-bottom:150%;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
<div class="portrait" style="background-image:url(https://via.placeholder.com/200x300);"></div>
<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>
</div>
</div>
<div class="card mb-4"style="min-width: 18rem; max-width: 18rem;">
<div class="portrait" style="background-image:url(https://via.placeholder.com/300x200);"></div>
<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>
</div>
</div>
https://stackoverflow.com/questions/52563532
复制相似问题