uni-app中如何让img标签旋转图片横屏后填充满全屏（做成视频全屏播放的效果）

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app中如何让img标签旋转图片横屏后填充满全屏（做成视频全屏播放的效果）

如何让img标签 旋转图片横屏后 填充满全屏 (做成视频全屏播放的效果)

不知道为啥 图片总是不能放大占满全屏

内容

<view style="height: 100%;width: 100%;border: 1px solid gold;">  
    <img  style="border: 1px solid salmon;" class="fullscreenImg" @click="isShowControlTool=!isShowControlTool" v-show="loadingResult" :src="currentImage" @error="onImageError" @load="onImageLoad">  
</view>

css

.fullscreenImg {  
    display: block;  
    width: 100vw;  
    height: 100vh;  
    object-fit: contain;  
    transform: rotate(90deg);  
}

image


Harmonyos Next教程
2 回复

我希望图片能放大占满全屏 但是不知道为什么总是图片会有空白区域


在uni-app中，要让<img>标签在设备横屏时旋转图片并填充满全屏，可以通过CSS样式和JavaScript事件监听来实现。以下是一个示例代码，展示了如何达到视频全屏播放的效果。

首先，确保你的页面支持横屏显示。在pages.json中配置页面支持横屏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "app-plus": {
          "screenOrientation": "landscape"
        }
      }
    }
  ]
}

然后，在你的页面中，使用以下代码：

<template>
  <view class="container">
    <image class="full-screen-image" :style="imageStyle" src="your-image-url.jpg" @load="onLoad"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageStyle: {}
    };
  },
  methods: {
    onLoad() {
      this.adjustImageSize();
      window.addEventListener('resize', this.adjustImageSize);
    },
    adjustImageSize() {
      const img = this.$refs.fullScreenImage;
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const imgRatio = img.naturalWidth / img.naturalHeight;
      let imgWidth, imgHeight;

      if (windowWidth / windowHeight > imgRatio) {
        imgHeight = windowHeight;
        imgWidth = imgHeight * imgRatio;
      } else {
        imgWidth = windowWidth;
        imgHeight = imgWidth / imgRatio;
      }

      const left = (windowWidth - imgWidth) / 2;
      const top = (windowHeight - imgHeight) / 2;

      this.imageStyle = {
        width: `${imgWidth}px`,
        height: `${imgHeight}px`,
        transform: 'rotate(90deg)',
        transformOrigin: 'top left',
        left: `${left}px`,
        top: `${top}px`,
        position: 'absolute'
      };
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.adjustImageSize);
  }
};
</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.full-screen-image {
  display: block;
}
</style>

在这个示例中，我们做了以下几件事：

  1. 在pages.json中配置页面支持横屏。
  2. 使用<image>标签加载图片，并绑定@load事件以在图片加载完成后调整其大小。
  3. 在onLoad方法中，监听窗口的resize事件，以便在窗口大小变化时重新调整图片大小。
  4. 在adjustImageSize方法中，根据窗口的宽度和高度以及图片的宽高比来计算图片的新尺寸和位置，并使用CSS的transform属性将图片旋转90度。
  5. 使用position: absolute将图片定位在窗口的中心，并确保其填充满全屏。

请注意，这个示例假设图片是竖屏拍摄的，因此需要在横屏时旋转90度。如果你的图片已经是横屏，可以移除transform属性或调整旋转角度。

回到顶部