How to change the background size in uniapp

In recent years, with the development of mobile Internet technology, cross-platform development technology based on H5 and JavaScript has gradually come into people's vision. Among them, uniapp is a cross-platform development framework that integrates the Vue framework and encapsulates various mobile APIs, which can help developers quickly build cross-platform applications such as native APPs, WeChat applets, and H5. During the development process of uniapp, sometimes you encounter situations where you need to change the background size. This article will introduce in detail how to change the background size of uniapp and the precautions.

1. How to change the background size of uniapp

1. Use CSS to control the size of the background image

The effect of changing the background size can be achieved by setting the size of the background image. In uniapp, we can use the background-size attribute of CSS to set the size of the background image. The syntax is as follows:

background-size: width height;

Among them, width represents the width of the background image, and height represents the height of the background image, which can take values. For units such as pixels (px), percentage (%), vw and vh. It should be noted that when the set aspect ratio is inconsistent with the original aspect ratio of the picture, it may cause the picture to be stretched or compressed.

2. Use JavaScript to dynamically control the size of the background image

In addition to using CSS to control the size of the background image, we can also use JavaScript to dynamically control it. The specific method is as follows:

(1) Define a container with style in the template file, and define the size, url and other attributes of the background image in data;

<template>
  <div class="bg" :style="&#39;background-image: url(&#39; + imgUrl + &#39;); background-size: &#39; + bgSize + &#39;; height: 100vh&#39;">
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: 'https://xxx.com/bg.jpg',
      bgSize: '100%',
      windowWidth: uni.getSystemInfoSync().windowWidth,
      windowHeight: uni.getSystemInfoSync().windowHeight
    }
  },
}
</script>

<style>
.bg {
  background-repeat: no-repeat;
  background-position: center;
}
</style>

(2) In mounted In the life cycle function, the width of the background image is dynamically calculated through JavaScript, and the calculation result is assigned to bgSize:

mounted () {
  let img = new Image()
  img.src = this.imgUrl
  let imgRatio = img.width / img.height
  let windowRatio = this.windowWidth / this.windowHeight
  if (imgRatio > windowRatio) { // 图片比窗口宽
    this.bgSize = 'auto 100%'
  } else { // 图片比窗口高
    this.bgSize = '100% auto'
  }
}

2. Notes

1. The background image size should be the same as the container, and Keep original aspect ratio.

2. When using CSS to control the size of the background image, you need to pay attention to the value range of the background-size attribute and prevent the image from stretching or compressing.

3. When using JavaScript to dynamically control the size of the background image, you need to obtain the width and height of the image in the mounted life cycle function to calculate the size of the background image.

4. The screen sizes and resolutions of different devices need to be considered to ensure that the background image adapts to different screen sizes.

5. When setting the size of the background image, you need to pay attention to whether the height of the background container is 100vh to avoid insufficient container height.

In short, in uniapp development, to achieve the effect of changing the background size, it is necessary to master the basic HTML, CSS and JavaScript syntax, combined with the characteristics of the uniapp framework, and flexibly use different methods to achieve it. Hope this article helps you!

The above is the detailed content of How to change the background size in uniapp. For more information, please follow other related articles on the PHP Chinese website!