如何解决如何使我的方形图像具有响应性?
我需要创建一个响应式方形图像,我从这里遵循了不同的答案,但有些事情正在发生。我可以看到我的方形 DIV(因为它有黑色背景),但是进入其中的图像不在方形中,就像由于某种原因被偏移了,我不知道为什么。
/* Cards */
.card-main-container {
margin-top: 20px;
}
.card-wrapper {
margin-bottom: 20px;
}
.card-img-square {
float: left;
position: relative;
width: 30%;
padding-bottom: 30%;
margin: 1.66%;
overflow: hidden;
}
.card-img-square img {
height: 100%;
width: 100%;
object-fit: cover;
margin: 0 auto;
position: absolute;
}
.card-information-container {
background-color: $white;
padding-bottom: 20px;
padding-top: 6px;
}
.card-region-commune {
line-height: 1.4em;
color: $disclaimer;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-Box;
-webkit-Box-orient: vertical;
-webkit-line-clamp: 2;
min-height: 34px;
margin-bottom: 5px;
}
.card-category {
font-size: 0.8em;
font-weight: normal;
color: $placeholder;
margin-top: 10px;
margin-bottom: 5px;
}
.card-title {
margin-bottom: 10px;
color: $secondary-color;
}
.card-description {
color: $secondary-color;
font-size: 0.9em;
margin-top: 10px;
}
.card-category,.card-title {
white-space: Nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-description {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-Box;
-webkit-Box-orient: vertical;
-webkit-line-clamp: 2;
min-height: 42px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="col card-wrapper">
<div class="col-12">
<div class="row">
<div class="col card-information-container">
<div class="row">
<div class="col card-img-square">
<img src="https://insideretail.com.au/wp-content/uploads/2020/08/hairdresser.jpg" class="img-fluid" />
</div>
<div class="col text-left">
<img src="images/service-stars-demo.svg" alt="Ranking">
<!-- Insignia Verificado -->
<p class="card-item-indication"><i class="fas fa-shield-check pr-1"></i> Text</p>
</div>
</div>
</div>
<!-- /Card 1-->
解决方法
我用新的 img
has your class 包裹了 div
标签以避免更改 .col 宽度并使 img
具有与您的全宽推荐的填充,它在不同的屏幕上看起来都不错。您可以从这里查看更改https://codepen.io/abdelrhman-m27/pen/jOVBzLx
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。