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

Question

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

Answer 1

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

要实现图片不完全显示的效果，可以将图片设置为绝对定位，并设置其宽度和高度。然后使用 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 属性将其放大两倍。超出容器部分将被隐藏起来。
```