Js controls picture rotation (90 degrees at the click of a button)

how to achieve this, click the button once, the picture is rotated 90 degrees, and the rotated picture adapts to the width and height in the container.
css3"s transform:rotate () rotates around the center of the image, so that if it is a rectangular image, it will be rotated 90 degrees and it will change its appearance in the original container. Exceeds the height or width of the container.
as shown in the following figure, if you just use rotate rotation, it will look like this. The first is the original state, and the second is the rotated state. How to solve this problem? I think the picture is still adapted to the container after rotation.) Picture description

Feb.28,2021

first give a general idea, after clicking, use the rotate rotation of transform, zoom in and out can be adjusted, and then read the width and height of the container adaptively.
there are two ways to adjust transform,. The most common way is to manipulate style, directly. The second one is to write a class name, addclass.

Menu