8、电脑站内容防溢出解决方案【网页切图技巧】

一、现象

电脑网站，主体内容部分如果上传图片太大，会有溢出的现象。让页面很不美观。

二、原因

内容页主体部分，客户通过编辑器自行编辑，所以可能有各种情况。不能要求客户每一个图片都自行调整宽度。所以一定要做出一些代码应对这样的问题。

三、解决办法

网站编辑区主体部分，样式原则：

    溢出部分隐藏，宽度确定高度弹性，行高用百分比，其他样式一律不写

代码如下：

width:700px;

height:auto;

overflow:hidden;

line-height:150%;

注意：

1、高度一定是弹性的，这样才能保证内容多少都不影响界面显示

2、line-height一定不要写成固定值，需要是百分数。

（备注：有时候可以用 .content img{max-width:900px} 这样限制最大宽度的方式来写样式，也是一种思路。但会发生客户如果给图片写高了，就出现压扁现象。所以综合考虑，溢出部分不显示来提醒客户去后台编辑器里改一下图片大小，是相对更合适的做法）