小程序前端传长图时怎么做到图片不完全显示，类似放大显示内容

像hupu这样长图不完全显示，只显示一部分，保持清晰，不是图片被压缩的那种

看过来！！！有用给个关注就行！

要实现图片不完全显示的效果，可以将图片设置为绝对定位，并设置其宽度和高度。然后使用 CSS 的 overflow 属性将图片内容超出部分隐藏起来，同时可以通过设置 transform 属性来放大或缩小图片，从而实现放大显示内容的效果。

<div class="container">
  <img src="image.jpg" alt="长图">
</div>

```html

.container {
  width: 500px; /* 设置容器宽度 */
  height: 300px; /* 设置容器高度 */
  position: relative; /* 设置为相对定位 */
  overflow: hidden; /* 超出部分隐藏 */
}

.container img {
  position: absolute; /* 设置为绝对定位 */
  width: auto; /* 设置宽度自适应 */
  height: 100%; /* 设置高度为容器高度 */
  transform: scale(2); /* 放大两倍 */
  transform-origin: top left; /* 设置放大的原点 */
}

将图片放在一个宽度为 500px，高度为 300px 的容器中，通过绝对定位将其定位到容器的左上角，设置宽度自适应，高度为容器高度，然后通过 transform 属性将其放大两倍。超出容器部分将被隐藏起来。
```

针对小程序前端传长图时需要只显示部分内容，保持清晰度的需求，一种可行的解决方案是使用 CSS 的属性来控制图片显示的大小和位置。

具体实现方法如下：

1.首先，将图片作为一个背景设置到一个 div 容器中。

2.然后，设置容器大小为所需要的大小，并对容器进行溢出隐藏处理。这样就能够保持图片只显示一部分。

3.接下来，使用 background-image 属性将图片加入到容器中，并设置 background-size 的属性为 contain 或者 cover，根据实际需求来决定。contain 的话，将图片缩放至合适的比例，同时保持宽度和高度都在容器内，而 cover 则是将宽度和高度中较宽的那一方缩放至容器内，另一方则会溢出容器。通过选择不同的属性可以实现更加丰富多样的效果。

4.使用 background-position 属性来控制图片的显示位置，使所需要显示的部分浮出到容器之外。

这种方法可以有效地实现图片局部显示的需求，同时保持清晰度，适用于小程序等移动端开发中的场景。