有的人做图的时候,把图片宽度设置为1920px,使用全屏工具生成代码后,发布到店铺,发现虽然是模块是全屏居中的,但是两边不完整,这是什么原因呢?
在分析这个问题之前,我们先来了解一下常见电脑**显示屏的尺寸与分辨率**:
10寸 800×600(5:4)、1024×768(4:3) 为增加可视面积,小屏幕显示器宽高比都很小
12寸 1280×800(16:10)、
13寸 1280×800(16:10)、
14寸 1024×768(4:3)、1280×800(16:10)、1280×720(16:9)、 笔记本屏幕普遍这几种分辨率
15寸 1280×800(16:10)、1440×900(16:10)、1440×810(16:9)
17寸 1440×900(16:10)、1440×810(16:9)、1680×945(16:9)、 1024×768(4:3)、1280×1024(5:4)
19寸 1440×900(16:10)、1680×945(16:9)
22寸 1680×1050(16:10)、1680×945(16:9)
24寸 1920×1200(16:10)、1680×945(16:9)
![](https://box.kancloud.cn/a965d2ead094a10b8b53e3cd76840aa9_812x565.png)
上面这张图,是我的显示器的分辨率设置。我用的显示器,是24英寸的。
举例说明,如果您的显示器是19英寸宽屏的,那么最佳分辨率一般是1440x900px;
那么任何网站上的图片,如果宽度大于1440px,在您的显示器上都可能会显示不完整。比如某个网站的全屏图片宽度是1920px,那么在您显示器上,能显示的宽度可能就是1440px,其余480px**由于显示屏的尺寸不够大,是不会显示的**。
这里我为什么要用‘可能’两个字呢,是因为这个规则对自适应网站是不适用的。因为自适应布局的网站,图片会根据浏览器的窗口大小做自动缩放。
通常的网店页面,如**淘宝、天猫、阿里巴巴、京东,这些平台的框架都是固定布局**。那么有人会问,能不能做图片自适应的代码呢?答案是不能。这些网店平台没有自适应框架,也不支持自适应的代码。
下面这张图,宽度是1920px,安装到店铺后,如果是全屏居中的,在不同尺寸的显示器上,显示效果也是不同的。比如我的显示器是24英寸的,分辨率是1920x1080px;那么这张图在我的显示器上是可以完整显示的。如果显示器分辨率小于我的显示器分辨率,在淘宝店铺页面上,就一定会出现两侧有部分图片不显示的情况!(不显示区域的宽度,等于图片宽度减去显示器分辨率的宽度。)
![](https://box.kancloud.cn/699fda5d98cba758520ec80ed2e466e7_1903x648.png)
既然淘宝这些电商平台的页面是固定布局页面,太大的图片在小型显示器上又不显示,那我们美工怎么作全屏图呢?总不能让访问网页的人都买同样尺寸的显示器吧?
为了解决这个问题,我作为一个从业超过10年的美工,建议采用以下方法,兼顾尺寸不同的显示器,让所有访问者都能访问到图片中的信息。
1.全屏图片的宽度,个人建议设置为1920px,这样在24寸以下的显示器上,都是全屏显示器的;27寸以上的显示器,目前很少,可以不考虑;
2.把图片中最重要的信息,都做在中间950或990px之内。超出这个范围,两侧的区域可放置一些点缀的图片元素或留白;
比如上面这张海报图,主要内容是一个会员价格表。为了兼顾各种尺寸的显示器,我把价格表放在了图片正中间,两边的都是点缀的元素。即使在很小的显示器上,两侧的次要内容不显示,也不影响内容的传达。
> 有的同学要说了,讲了这么多,还是没看明白。那我告诉你一个最简单的办法:
先看下你电脑显示器的分辨率宽度是多少,在photoshop中设计图片时,**画布的宽度和你电脑显示器分辨率宽度相同**即可避免代码安装到店铺后显示不完整的问题。
- 前言
- 关于美工助理
- 会员账号
- 登录账号
- 注册账号
- 修改密码
- 账号权限
- 会员升级
- 免费试用
- 购买后可以提供发票吗
- 使用教程
- 淘宝上常见的问题
- 视频教程
- 10分钟制作全屏页面
- 制作全屏店招
- 制作开门动画
- 制作倒计时
- 制作飞行动画
- 超级热区
- 视觉差
- 动感扫描
- 背景无缝滚动
- 用视频做背景
- 装修问题
- 天猫自定义区不透明有白底
- 切片出现分隔符怎么办
- 热区做好后无法点击或链接错误
- 导航条下面有缝隙怎么办
- 如何制作全屏店招
- 店招如何在950/990外加链接
- 专业版二级页面如何全屏
- 如何消除专业版页头下方的缝隙?
- 如何隐藏旺铺专业版的默认导航
- 图片上传后变模糊了?
- 全屏图片两侧显示不完整?
- 常见问题
- 遇到问题如何提问最有效
- 进入调试模式
- 淘宝美工助理.exe已停止工作
- 软件关闭后打不开了
- 软件可能已经被破坏或被病毒感染
- 未能获取到代码
- 无法找到指定dll库文件
- 无法访问指定文件
- Not found the kernel
- 应用程序错误
- 内置素材如何下载
- 忘记账号或密码
- 自由布局工具
- 开发日志
- 软件下载
- 软件安装
- 运行环境
- 更新日志
- 使用条款