css 图片旋转并自适应div

import { useState} from 'react'
function zimg(params) {
    const [rotateIndex,setrotateIndex]=useState(0)
    function bindrotate(){
        let rotateIndex1=rotateIndex?0:1
        setrotateIndex(rotateIndex1)
    }
      return (
 <>
<div className={` ${styles.box_img} ${rotateIndex?styles.box_rotate:''}`}>
    <img src="/img/1.png">
</div>
<div className={styles.box_btn} onClick={bindrotate}>旋转<div>
</>
       )
}
export default zimg

.box_img{
    width: 100vw;
 height: 100vh;
 overflow: hidden;
}
//旋转90度，宽度和高度调换位置，并调整中心位置
.box_rotate{
  overflow: hidden;
  transform: rotate(90deg)  translate(calc( 100vh / 2 - 100vw / 2) , calc(100vh / 2 - 100vw / 2));
  width: 100vh;
  height: 100vw;
    transform-origin: center;
}

 .box_btn{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgba(0,0,0,0.5);
  color: #ffffff;
 }

css 图片旋转并自适应div，html的，可以直接运行 https://download.csdn.net/download/qq_41211900/16077801