image - 如何使自适应图像大于 Bootstrap 中的容器

Question

我想创建一个自适应图像，它比 bootstrap 4 alpha 2 中的单元格大。用作背景 - 这是不可能的，它被剪裁了。于是写了代码:

<div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 container-circle">
<img src="img/background-areapeople-circle.png" id="backgroung-circle">
<section>
    <div class="text-uppercase">Lorem ipsum Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <aside class="text-uppercase"><a href="#">Lorem ipsum</a></aside>
</section>

带有图像样式:

#backgroung-circle{
    position: absolute;
    left: -12rem;
    top: 0;
    width: 150%;
    z-index: -1;
}

但是当屏幕比例超过120%时，图片裁剪过大，有文字的部分会超出图片。

Answer 1

你可以试试这些:

• 使用'container-fluid'作为主容器
• > Remove gutter细胞间
• 添加额外的media queries为一些特定的屏幕尺寸设置参数

希望它有用