Question

我在包装器div中有3列，每个div有两个div，一个带有image，另一个带有text。

我想让它具有响应性，以便图像％文本共享50％的区域，并且在某些时候文本是可见的＆amp;图像被隐藏，反之亦然。

http://codepen.io/anon/pen/meWYeQ?editors=110

<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>

Answer 1

在图像内部图像框的宽度上添加100%，然后放下图像框本身的absolute位置（这样图像就可以正确缩放它的一半）。

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

强制将高度强制为100px允许它，因此当窗口缩小时图像的高度不会缩小。

Example

Resposive div与里面的图像和文本

1 个答案: