uniapp sets image size

With the rapid development of mobile Internet, more and more people are beginning to use mobile devices to browse the Internet. On the mobile side, images play a very important role as an integral part of web content. However, the actual screen size of most mobile devices is relatively small, and improper display of images may affect the user's browsing experience. When using the uniapp framework to create mobile applications, how to set the image size is a common question. This article will introduce how to set the image size in uniapp to help developers better create mobile applications.

1. Set image size in CSS styles

In uniapp, you can use CSS styles to control the size of images. There are two ways to set the size of an image in CSS: using the width and height properties, or using the max-width and max-height properties.

Use the width and height attributes to set the image size. The sample code is as follows:

<template>
  <div>
    <img  class="img1 lazy"  src="/static/imghwm/default1.png"  data-src="../assets/images/sample.jpg"  / alt="uniapp sets image size" >
  </div>
</template>

<style>
  .img1 {
    width: 200px;
    height: 200px;
  }
</style>

Use the max-width and max-height attributes to set the image size. The sample code is as follows:

<template>
  <div>
    <img  class="img2 lazy"  src="/static/imghwm/default1.png"  data-src="../assets/images/sample.jpg"  / alt="uniapp sets image size" >
  </div>
</template>

<style>
  .img2 {
    max-width: 200px;
    max-height: 200px;
  }
</style>

The advantage of using the max-width and max-height attributes is that the image size can adapt to the screen size while avoiding the problem of image deformation.

2. Set the image size in the HTML tag

In addition to setting the image size in the CSS style, you can also set the image size directly in the HTML tag. This method is relatively simple, but also more troublesome, because it needs to be set everywhere where images are used.

Use the width and height attributes to set the image size. The sample code is as follows:

<img  src="/static/imghwm/default1.png"  data-src="../assets/images/sample.jpg"  class="lazy"    style="max-width:90%"  style="max-width:90%" / alt="uniapp sets image size" >

Use the max-width and max-height attributes to set the image size. The sample code is as follows:

<img  src="/static/imghwm/default1.png"  data-src="../assets/images/sample.jpg"  class="lazy"   style="max-width:90%" / alt="uniapp sets image size" >

3. Set image size in JS code

In uniapp, you can also set the image size dynamically in JS code. Normally, you can use the uni.getImageInfo() method to obtain image information and then dynamically set the image size.

The sample code is as follows:

<template>
  <div>
    <img  src="/static/imghwm/default1.png"  data-src="imageUrl"  class="lazy"  : :  style="max-width:90%"px', height: imgHeight + 'px' }" / alt="uniapp sets image size" >
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: '../assets/images/sample.jpg',
        imgWidth: 0,
        imgHeight: 0
      }
    },
    created() {
      this.getImageSize()
    },
    methods: {
      getImageSize() {
        uni.getImageInfo({
          src: this.imageUrl,
          success: (res) => {
            this.imgWidth = res.width
            this.imgHeight = res.height
          }
        })
      }
    }
  }
</script>

In the above sample code, the uni.getImageInfo() method is used to obtain the width and height of the image, and then set them to the values ​​of imgWidth and imgHeight, Finally, dynamically set the size of the image in the HTML tag. This method can set the image size more flexibly, but it should be noted that when using JS to dynamically set the image size, the image loading time needs to be taken into account to avoid the problem of image size errors.

Summary

This article introduces three methods for setting image size in uniapp: setting in CSS style, setting in HTML tag, and setting in JS code. In actual development, developers can choose the most appropriate method according to specific needs. No matter which method is used, you need to pay attention to the quality and size of the image to avoid the problem of images that are too large or too small, which will affect the user's browsing experience.

The above is the detailed content of uniapp sets image size. For more information, please follow other related articles on the PHP Chinese website!