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

时间:2016-02-17 14:07:32

标签: html5 css3 css-transforms

在调整页面大小时,我对填充切片图像有疑问。

在普通视图(100%)中,一切看起来都很好,但是当页面调整大小时,有时会出现白色细条,我真的不知道为什么会发生这种情况。只有我想到的是,在网页浏览器缩放页面后,它可能与轮廓分数有关。它发生在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>

1 个答案:

答案 0 :(得分:0)

这是因为语句calc((100% - 960px)/2)导致非整数值,因此浏览器应将其四舍五入为整数(正常数字不浮动数字),因此它将比您预期的小1px。您可以使用calc((100% - 959px)/2)轻松将效果更改为正常。

更新

您可以轻松使用imgbackground-image,而不是使用background-size: cover;,这样即使在调整大小时也不会出现问题。