[分享]css不让图案随浏览器变

CSS中有一个很常见的问题，那就是浏览器大小一变化，页面中的图案就会随之而变。这给页面的美观度带来了极大的影响。今天我们就来看看如何使用CSS把这一问题解决掉。.wrapper { width: 10...

CSS中有一个很常见的问题，那就是浏览器大小一变化，页面中的图案就会随之而变。这给页面的美观度带来了极大的影响。今天我们就来看看如何使用CSS把这一问题解决掉。

.wrapper {
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}
 
.image {
  background-image: url('image.png');
  width: 500px;
  height: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
}
@media screen and (max-width: 1000px) {
  .wrapper {
    width: 90%;
    height: auto;
  }
 
  .image {
    width: 80%;
    height: auto;
  }
} 

代码解析：

1.首先定义一个.wrapper的class，这里用绝对定位的方式把图案定位在容器中心。
2.使用@media查询，当浏览器大小小于1000px时，使用相对宽度替代绝对宽度。
3.设置.image的宽度为80%自适应，高度自适应。

通过这种方式，我们可以保持图案的大小和位置在任何浏览器大小下始终保持一致和美观，更加符合用户体验。