Discuss how to avoid image deformation problems in Vue

Vue is a popular JavaScript framework that is extremely useful in developing modern web applications. Adding images in Vue is a common need, but many times we will encounter such a problem: when the image size is different from the container size, the image will be deformed. This article will explore how to avoid image deformation in Vue.

Why is the picture deformed?

In Vue, we usually add images by using the img tag. When the dimensions of the image are different from those of the container, the image is stretched or compressed to fit the size of the container, causing distortion. For example, in the code below, we use the img tag to add an image to a container:

<div>
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="Discuss how to avoid image deformation problems in Vue" >
</div>

Let's say our container's width is 400 pixels, and our image's original dimensions are 800 pixels wide and 600 pixels wide high. When we add an image in the above code, the image will be compressed to the width of the container (i.e. 400 pixels) and the height will be reduced accordingly, so the image will be distorted.

How to avoid image deformation?

In order to avoid image deformation, we can use CSS to control the size and position of the image so that it adapts to the size of the container. The following are several methods:

Method 1: Use the object-fit attribute

.container {
  width: 400px;
  height: 300px;
  overflow: hidden;
}

img {
  width: 100%; /* 宽度100%填充容器 */
  height: 100%; /* 高度100%填充容器 */
  object-fit: cover; /* 图片放在容器中，并尺度不失真，可能会剪裁一部分 */
}

In this method, we set the width and height of the container and set its overflow attribute to "hidden ” to crop the image. Next, we set the width and height of the img tag to 100% to ensure that the image fills the container, and use the object-fit attribute to keep the image dimensions within the container.

Method 2: Use background image

.container {
  width: 400px;
  height: 300px;
  background-image: url('my-image.jpg');
  background-size: cover;
  background-position: center; /* 图片放在容器中央 */
}

In this method, we use the background-image property of CSS to use the image as the background of the container, and use the background-size property to set the size of the background image Size so that it fits into the container. We also use the background-position property to position the image in the center of the container.

Method 3: Manually resize the image

.container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative; /* 使图片定位与容器绝对位置一致 */
}

img {
  position: absolute; /* 确保img标签的绝对位置和容器的一致 */
  top: 50%; /* 图片向上偏移50% */
  left: 50%; /* 图片向左偏移50% */
  transform: translate(-50%, -50%); /* 图片向左偏移50%，向上偏移50% */
  max-width: 100%;
  max-height: 100%;
}

In this method, we set the overflow property of the container to "hidden" to crop the image, but we do not use the object-fit property. Instead, we manually adjust the image's position and size. We place the image in the center of the container using absolute positioning and offset it 50% up and to the left using the translate property. We can also limit the maximum width and height of the image to ensure it doesn't overflow the container.

Conclusion

When adding images in a Vue application, we need to pay attention to the coordination between the image size and the container size. In order to avoid deformation, we can use the object-fit property of CSS to avoid the mismatch between the original image and the container size through the background image, or manually adjust the size and position of the image. . No matter which method you choose, it should be considered a more important step in optimizing the visuals of your Vue application.

The above is the detailed content of Discuss how to avoid image deformation problems in Vue. For more information, please follow other related articles on the PHP Chinese website!