CSS로 이미지 회전

CSS로만 이미지를 90도 회전하고 싶습니다. 나는 회전을 할 수는 있지만 이미지의 위치는 그것이되어야하는 것이 아니다. 먼저 동일한 div에 다른 요소를 겹치게하고 두 번째로 수직 치수가 포함 div보다 커집니다. 여기에 두 개의 클래스가CSS로 이미지 회전

.imagetest img { 
transform:   rotate(270deg); 
-ms-transform:  rotate(270deg); 
-moz-transform:  rotate(270deg); 
-webkit-transform: rotate(270deg); 
-o-transform:  rotate(270deg); 
} 
.photo { 
width: 95%; 
padding: 0 15px; 
margin: 0 0 10px 0; 
float: left; 
background: #828DAD; 
}

로 정의됩니다 내 코드

<article> 
<section class="photo"> 
<div>Title</div> 
<div class="imagetest"> 
<img src="DSC01688.JPG" width=100%/> 
</div> 
</section> 
</article>

는 섹션 내에서 이미지를 유지하는 방법이있다? 이미지를 번역하고 크기를 조정하여 섹션 내에 있도록 할 수는 있지만 이미지 크기를 사전에 알고있는 경우에만 작동합니다. 나는 크기에 의존하지 않는 신뢰할 수있는 방법을 원합니다.

출처

2012-12-02 v923z

부모에게 overflow: hidden의 스타일을 지정하십시오. 형제 요소가 겹쳐 있으면 높이/너비가 고정 된 컨테이너 안에 배치하고 overflow: hidden의 스타일을 지정해야합니다.

출처

2012-12-02 21:34:20

답장을 보내 주셔서 감사합니다. 그것은 실제로 문제를 해결합니다. – v923z

다 보았는데,이 한 줄이 답이되었습니다. –

이미지가 사각형이 아니 어서 브라우저가 이와 같이 조정되는 것처럼 보이는 문제가 있습니다. 회전 후 이미지 여백을 변경하여 치수를 유지하십시오.

.imagetest img { 
    transform: rotate(270deg); 
    ... 
    margin: 10px 0px; 
}

양은 이미지의 높이 X 폭의 차이에 의존 할 것이다. 여백 매개 변수를 인식하려면 display:inline-block; 또는 display:block을 추가해야 할 수도 있습니다.

출처

2014-11-05 00:42:45

CSS로 이미지 회전

답변

관련 문제