我的目标是让这个区域尽可能地响应。在超大视口上看起来很棒,但是当我们开始缩小时,例如:约 930 像素的视口,我无法像第一个屏幕截图那样让照片完美对齐。
我尝试将照片区域设置为 a background-size: cover
,但是,当我们进入较小的视口时,该解决方案只会切断图片的边缘(这不是一个选项)。
第二个问题是关于移动视口的:这两个块需要堆叠。不过,很确定我可以在第一个问题解决后弄清楚那部分。
<section class="card-group">
<div class="card">
<img src="..." class="img-fluid">
</div>
<div class="card card-vcenter">
<div class="card-block">.....</div>
</div>
</section>
.card-vcenter{
display: flex;
align-items: center;
justify-content: center;
}
提前致谢!