html - 使用 Bootstrap 覆盖两个图像

Question

我正在尝试使用 Bootstrap 在其他图像之上覆盖两个图像，如下代码所示:

  <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black">
            <div style='position: relative; width:100%; height:100%; background:center; border:solid 1px red'>
                <img src="Images/banner-transparente.jpg" class="img-responsive" />
                <div style='position: absolute; width: 100%; height: 100%; top: 20%; border:solid 1px black'>
                    <img src="Images/logo-trt-home.png" class="img-responsive" />
                </div>
            </div>
        </div>
    </div>

大屏下效果OK:

但是在小屏幕上，图像会被裁剪。

我如何使用 Bootstrap 的网格系统，利用图像所需的响应能力来做到这一点？

http://jsfiddle.net/s116Ld99/5/ 上的代码

Answer 1

我试过下面的代码:

    <div class="row">
        <div class="col-lg-8 col-md-8 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black">
            <div style="background-image:url('Images/banner-transparente.jpg'); border: solid 1px green">
                <img src="Images/logo-trt-home.png" class="img-responsive" />
            </div>
        </div>
    </div>

效果很好!

[1] https://jsfiddle.net/bwth52ft/