【css3 动画】CSS3 流式图片的设置,避免图片撑开所在的容器(附样例)

时间:2020-04-02  来源:flex  阅读:

一般来说,图片占用的空间取决于其内容,也就是图片到底由多少个像素组成。但这种不加控制的处理方式在小尺寸窗口中会导致问题。如果窗口太小,图片就会撑开所在的栏,挤掉其他元素,使布局混乱。

  1,把图片的宽度限定为其容器的最大宽度

即把 max-width 设为 100%。这里的100%相对的是元素所在的容器。设置后,图片要么显示为自己的实际大小,要么扩张到容器的边界为止。

原文:CSS3 - 流式图片的设置,避免图片撑开所在的容器(附样例)




    
    
    hangge.com
    


    
        
            left
               
    
    
        
            right
            
                   
    

2,给图片周围加上外边距
如果想要给图片周围加上一点外边距,必须给 margin-left 和 margin-right 设定百分比值,而且要保证加上max-width后等于100%(不能超过)

原文:CSS3 - 流式图片的设置,避免图片撑开所在的容器(附样例)

 

img {
    max-width:90%;
    margin-left: 5%;
    margin-right: 5%;
}

【css3 动画】CSS3 流式图片的设置,避免图片撑开所在的容器(附样例)

http://m.bbyears.com/flash/91326.html

推荐访问:css3选择器 css3新特性
相关阅读 猜你喜欢
本类排行 本类最新