通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
  有的人做图的时候,把图片宽度设置为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中设计图片时,**画布的宽度和你电脑显示器分辨率宽度相同**即可避免代码安装到店铺后显示不完整的问题。