宽度为100%的位图面对屏幕放大的解决办法(可拼接时)

CSS: 宽度为100%的位图面对屏幕放大的解决办法

需求

一张长图，宽度占满。

这个要求看似很简单，但仔细想来，位图的尺寸设为100%其实是一件很麻烦的事情。位图不像矢量图，可以伸缩。屏幕宽度缩小还好，两边自动隐藏即可；若是放大，由于图片本身宽度有限，就会出现问题。要么是留白，要么是拉伸。留白显然不满足需求；拉伸就会使得图片变模糊，而且高度也会等比例拉伸；如果限制高度，整个图片都会变形。

方法

一开始就给足够长的图，srcset 判断加载。

这方法比较实在，也是通用方法，但我见识短浅，实在不知道什么叫足够长，而且在不需要时，便成了浪费。

另一种方法，用于特殊情况

有理由相信，这种需求，要放的图片一般不会是照片，而是制作出来的图。就算是照片，也是整个100%作为背景（而不会要做成长条），此时对画质的要求不会很高。要么就会允许留白。

将图片的两边做成可拼接的形式，将主图居中，监听屏幕宽度变化，动态地在两端拼接图片。

假设本身是这样的

<div>
<img id="mainImg" alt="主图片" />
</div>

我们需要这样

<div>
<img class="left" alt="左部分" />
<img id="mainImg" alt="主图片" />
<img class="right" alt="右部分" />
</div>

为了令这一串图片居中，我们需要

<div>
<div id="container"
<img class="left" alt="左部分" />
<img id="mainImg" alt="主图片" />
<img class="right" alt="右部分" />
</div>
</div>

#container{
white-space: nowrap;

position: absolute;
left: 50%;
transform: translate(-50%, 0);
}

只需要每次在两边加的图片尺寸相同，图片的添加就会非常自然了。