이미지 회전시 높이? 조절 문의
본문
이미지를 불러올때 회전을 시켜야 하는 일이 생겼습니다.
검색으로 일단 돌리는데는 성공? 했는데
가로가 긴 사진을 세로로 돌렸더니 아랬쪽을 가려버리네요.
코드는 아래처럼 했습니다.
<style>
.rotate {
transform: rotate(90deg) translateY(-100%);
transform-origin:top left;
}
</style>
<body>
<H1>이미지 회전 시키기</H1>
<div class="rotate"><img src="test.png"></div>
<hr>
<H1>다음 사진 간격 맞추기</H1>
<div><img src="test.png"></div>
</body>
그 결과물은 아래처럼 가려서 나옵니다.
원하는 결과물은 아래사진처럼 나오게 하고싶습니다.
이 이미지는 만든 코드
<style>
.rotate {
transform: rotate(90deg) translateY(-100%);
transform-origin:top left;
}
</style>
<body>
<H1>이미지 회전 시키기</H1>
<div class="rotate"><img src="test.png"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<H1>다음 사진 간격 맞추기</H1>
<div><img src="test.png"></div>
</body>
근데 사진 크기가 일정하지 않아서 <br> 을 무턱대고 넣어서 맞추기도 어렵고 이런 무식한 방법말고 좀 나은 방법이 있을까 싶어 문의 드려봅니다.
답변 1
이미지 가로 세로 크기 중 길이가 큰 쪽을 예를 들어
300픽셀이라고 한다면
가로 세로 300픽셀짜리 div 를 만들고 그 div 의 가운데에 이미지를 넣은 다음 이미지가 아니라 div를 회전시키면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.