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