day15-CSS之overflow

一、概述

　　我们在设置图片的时候，如果只设置外面div的，高度和宽度，但是里面的img的图片的高度和宽度没有变化，那我们想如何在外层div这边去控制它的高度和宽度呐，今天我们就来学习一下overflow。

二、overflow

2.1、不设置overfl的情况

说明：显示了图片的本身的大小，不受外层div的控制。

1
2
3
4
5
<body>
    <div style="height: 200px;width: 200px;">
        <img src="static/timg.jpg">
    </div>
</body>

 效果图：

2.2、overflow：hidden

说明：隐藏效果，只显示div的高度和宽度，图片多余的部分隐藏掉了

1
2
3
4
5
<body>
    <div style="height: 200px;width: 200px;overflow: hidden;">
        <img src="static/timg.jpg">
    </div>
</body>

 效果图：

2.3、overflow：auto

说明：图片超过外层的div的高度和宽度，就会显示滚动条

1
2
3
4
5
<body>
    <div style="height: 200px;width: 200px;overflow: auto;">
        <img src="static/timg.jpg">
    </div>
</body>

 效果图：

 三、显示图片的全部内容

我如果想显示图片的全部内容，那咋办呐？这个只能修改图片本身的属性了，代码如下：

1
2
3
4
5
<body>
    <div style="height: 200px;width: 200px;">
        <img src="static/timg.jpg" style="height: 200px;width: 200px;"> #修改图片本身的大小
    </div>
</body>

效果图：

posted @ 2018-05-21 09:54  东郭仔  阅读(221)  评论(0)    收藏  举报