如何使自适应图像大于引导程序中的容器

时间:2016-08-02 21:47:52

标签: image twitter-bootstrap css3 background

我想创建一个比自举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%时,切割图片太大,那么带文字的部分就超出了图像。

1 个答案:

答案 0 :(得分:0)

你可以试试这些:

  • 使用&#39;容器 - 液体&#39;作为主要容器
  • 细胞之间的
  • Remove gutter
  • 添加其他media queries以设置某些特定屏幕尺寸的参数

希望它有效