最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3 流式图片的设置，避免图片撑开所在的容器（附样例）
时间：2016-01-05 编辑：简简单单 来源：一聚教程网
一般来说，图片占用的空间取决于其内容，也就是图片到底由多少个像素组成。但这种不加控制的处理方式在小尺寸窗口中会导致问题。如果窗口太小，图片就会撑开所在的栏，挤掉其他元素，使布局混乱。
1，把图片的宽度限定为其容器的最大宽度
即把 max-width 设为 100%。这里的100%相对的是元素所在的容器。设置后，图片要么显示为自己的实际大小，要么扩张到容器的边界为止。
left
right
2，给图片周围加上外边距
如果想要给图片周围加上一点外边距，必须给 margin-left 和 margin-right 设定百分比值，而且要保证加上max-width后等于100%（不能超过）
img {
max-width:90%;
margin-left: 5%;
margin-right: 5%;
}
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26