Html 内部带有图像和文本的Resposive div

包装器div中有3列，每个div有两个div，一个带图像，一个带文本

我想让它具有响应性，以便图像%文本共享50%的区域，并且在某一点上文本是可见的&图像是隐藏的，反之亦然

我们的使命
视野
接触

在图像框内图像的宽度上添加一个

100%

，然后放下图像框本身的

绝对

位置（以便图像适当地将其缩放一半）

注意：强制将高度设置为

100px

允许这样，当窗口缩小时，图像的高度不会缩小

---

是否有一种方法可以修剪图像的侧面，使其看起来不会迷失方向？您可以用包含背景图像的

替换图像。但是，仅仅使用

是无法完成的，因为该标记意味着显示整个图像。根据您使用引导plz的链接，使用默认类将不需要注意响应类

<div class="container">
        <div class="row inner-wrapper">
            <div class="row footer-quick-links">
                <!--
                        <div class="col-xs-12 col-sm-6 col-md-4 bk-blue no-padding">
                            One
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4 bk-dark-blue no-padding">
                            Two
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4 bk-magenta no-padding">
                            Three
                        </div>
                -->
                <div class="footer-ql-box bk-dark-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>OUR MISSION</span></div></div>
                <div class="footer-ql-box bk-blue"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>VISION</span></div></div>
                <div class="footer-ql-box bk-magenta"><div class="f-img-box"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=163&h=100"></div><div class="f-label-box"><span>CONTACT</span></div></div>
            </div>
        </div>
    </div>

.footer-ql-box img{width:100%; height: 100px;}
.f-img-box{float:left;width:49%;}