如何在肖像中强制显示图片？
如何在肖像中强制显示图片？
提问于 2018-09-29 06:52:49
我有一个网页，其中包含的图像在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>回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52563532
复制相关文章
相似问题
腾讯云开发者
