CSS Overflow:hidden

终于知道为什么要设置OverFlow:Hidden了， 看代码：

<div id="wrapper">
    <figure class="img-wrapper">
        <img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/1973147/studiojq2015_explore62_1x.jpg" draggable="false">
        <figcaption>
            <h1 class="title">Hover Design Interaction</h1>
            <div class="bottom detail">
                <p>Some little detail here, things about the designs summary lorem anything related just to make this look long text.</p>
                <ul class="social-icons">
                    <li><a class="fa facebook" href="#"></a></li>
                    <li><a class="fa dribble" href="#"></a></li>
                    <li><a class="fa twitter" href="#"></a></li>
                    <li><a class="fa behance" href="#"></a></li>
                </ul>
            </div>

        </figcaption>
    </figure>
</div>

 

#wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
}


.img-wrapper{
    width: 350px;
    background: #3498db;
    overflow: hidden;
}

如果不设置OverFlow:Hidden, wrapper会默认伸开到图片的大小。

如果设置了，那么图片就会剪切到wrapper的宽度。