随着社会科学技术的进步，我们了解到一个新鲜词汇Banner，它主要体现某个文章或广告的中心意图，生动表达重要的情感思想或宣传中心。简而意之，banner就是图文广告的主旨，主要以图片的形式出现，既然是图片，我们就需要注意分辨率问题，分辨率可以分为显示分辨率与图像分辨率两类。分辨率决定位图图像的详细程度。一般来说，图像的分辨率越高，包含的像素越多，图像越清晰，打印质量越好。同时，它还增加了文件占用的存储空间。那么，二者结合，Banner图片的分辨率问题如何适应于电脑显示屏呢？又该如何快速使用图片编辑软件达到想要的效果呢？

　　比如我们经常遇到的电脑网站中，需要将首页的banner图片分辨率100%宽度，但是目前的电脑分辨率大小不一，一张照片满了就不可能适应分辨率。所以如果想给一张1920像素宽的图片，然后根据浏览器窗口的大小自动将图片居中该怎么做呢。

　　如果banner图片分辨率是1024的，那我们就选取1920宽的图片的1024宽。需要注意的是，不是从左开始取，而是居中取。如果屏幕分辨率小于banner分辨率，则以中心裁剪。

　　首先一步是将三个框包装在IMG外部：靠前个框控制整个，溢出隐藏，第二个框向左偏移-512像素，因为偏移量是从左边框到左边框的距离，所以向左偏移-512px，即图片的中心轴偏移到左边框，第三个框向右偏移-50%，即右边框距原右边框50%，使轴线位于外框的中心轴上，达到预期效果。

　　第二步，原则实际上是512px-50%的屏幕宽度，但是使用CSS更复杂。当然，可以用JS完成一两句代码。上面代码只适合小于banner图片分辨率的屏幕大小，所以加了条件。

　　以上内容就是关于banner图片分辨率如何适应电脑的解决思路，希望对大家有所帮助。当然如果还有不清楚的小伙伴，也可以直接上凡科快图这一图片编辑软件，选择合适的banner模板直接使用。记住哦，这一个图片编辑软件上的素材和banner模板都是免费的，大家可以放心使用~