html - 调整页面大小后切片图像不适合

Question

当调整页面大小时，我在调整切片图像时遇到问题。

在普通 View (100%) 中，一切看起来都很好，但是当调整页面大小时有时会出现白色细条，我真的不知道为什么会这样。只有我想到的是，它可能与网页浏览器缩放页面后的 rouding fractions 有关。它发生在 Chrome、Firefox、Safari、Edge、IE 中，我想在其他浏览器中也是如此。

这是在 chrome 中调整为 67% 时的样子: click

该示例包含 4 个切片图像，其中每个图像的变换比例为 0.96。

.container > img {
  display: block;
}
.container {
  position: absolute;
  top: 0;
  background: #fff;
}
.container-left,
.container-right {
  width: calc((100% - 960px) / 2);
  height: 100%;
}
.container-left > img,
.container-right > img {
  width: 500px;
  height: 1125px;
}
.container-left {
  left: 0;
}
.container-left > img {
  transform: scale(0.96);
  transform-origin: top right;
  position: absolute;
  top: 0;
  right: 0;
}
.container-right {
  right: 0;
}
.container-right > img {
  transform: scale(0.96);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}
.container-top,
.container-center {
  left: 0;
  right: 0;
  margin: 0 auto;
}
.container-top {
  width: 960px;
  height: 120px;
}
.container-top > img {
  transform: scale(0.96);
  transform-origin: top left;
  width: 1000px;
  height: 125px;
}
.container-center {
  top: 120px;
  width: 960px;
}
.container-center > img {
  transform: scale(0.96);
  transform-origin: top left;
  width: 1000px;
  height: 1000px;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#site {
  width: 940px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #000;
  margin-top: 800px;
  padding: 10px;
}

<div id="background">
  <div class="container container-left">
    <img src="http://gsroka.com/scale/left.png" />
  </div>
  <div class="container container-top">
    <img src="http://gsroka.com/scale/top.png" />
  </div>
  <div class="container container-center">
    <img src="http://gsroka.com/scale/center.png" />
  </div>
  <div class="container container-right">
    <img src="http://gsroka.com/scale/right.png" />
  </div>
</div>
<div id="site">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
  galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
  containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
  leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
  versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
  a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
  recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
  the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
  Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
  remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum
  is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
  not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
  like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
  type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
  dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
  was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
  and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
  leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
  versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
  a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
  recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Answer 1

发生这种情况是因为语句 calc((100% - 960px)/2) 导致非整数值，因此浏览器应将其四舍五入为整数(普通数字而不是 float )，因此它将比你期望的少 1px。您可以使用 calc((100% - 959px)/2) 轻松将效果更改为正常效果。

更新

您可以轻松使用 background-image 和 background-size: cover; 而不是使用 img即使在调整大小时也会稍后发布。