CSS : - * - 변형 : 회전 사용. 정렬 문제

Question

내 HTML picture viewer 들어, 내 그림의 일부를 CSS -*-transform: rotate (90도)을 통해 자동 회전하려고했습니다. 너비가 그림의 높이보다 크기 때문에 img 요소가 너무 작아서 회전 된 그림이 위와 아래의 텍스트 일부에 겹쳐졌습니다.

이 문제를 해결하려면/div을 예상 크기로 생성했습니다. 이로 인해 이미지가 잘못 배치 된 또 다른 문제가 발생합니다. 이 두 번째 문제를 수정/해결하기 위해 두 번째로 div을 작성하여 잘못된 위치를 수정했습니다.

일례 (온라인 : here)

• 사진 1024 = w 크기를 가지며, H = 768.
• 저는 90도 회전시키고 있습니다.
• 외부 div : <div style="display:block; width:768px; height:1024px;">
• div 내측이 올바른/예상/원했던 위치 정렬 결과 <div style="position:relative; left:-128px; top:128px; display:block;">

.

더 우아하고 깨끗한 방법이 있다면 궁금합니다. 두 된 div를 제거하고 IMG에 여백을 설정

Answer 1

봅니다 :

margin:128px -128px; 

이 작동해야하고, 조금 청소기입니다.

Ps : 128은 (1024-768)/2입니다.