图片的显示，具体问题如下

问题是这样的：一个div中放一组图片（图片按列进行排列），条件是：
1.图片的宽度=div的宽度=浏览器的宽度；
2.div只能显示一张图片，下面的图片要hidden起来；
3.浏览器进行缩放时也要满足以上条件。
关键的问题就是div的高度怎么定？如果设成固定的px，那一缩放下面的图片就露出来了。很纠结，希望得到大神的解答，谢谢！

（添加）代码如下:

//html代码
    <div id="pics">
        <ul>
            <li><a href=""><img src="1.jpg" alt="图书馆"></a></li>
            <li><a href=""><img src="2.jpg" alt="纪念册"></a></li>
            <li><a href=""><img src="3.jpg" alt="党建"></a></li>
            <li><a href=""><img src="4.jpg" alt="樱花"></a></li>
        </ul>
    </div>    

//css代码
#pics{
    width: 100%;
    height:????;
    overflow: hidden;
}
#pics ul li{
    margin: 0 0 20px;
    display: block;    
}
#pics ul li a img{
    width: 100%;
    
}

div的height该怎么设置，才能保证在改变浏览器窗口大小时不会看到后面三张照片？

---

用百分比设置width

---

能有代码吗？或者是你的目的是什么，是一个屏幕放一张图片？