当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

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

上传时间:2020-05-15             浏览次数:71

一、现象

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

二、原因

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

三、解决办法

网站编辑区主体部分,样式原则:

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

代码如下:

width:700px;

height:auto;

overflow:hidden;

line-height:150%;

注意:

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

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


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


0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们