CSSで画像を回転

Question

CSSで画像を90度回転させたいです。私は回転をすることができますが、イメージの位置はそれがすべきものではありません。まず、同じdiv内のいくつかの他の要素をオーバーレイし、第2に、その垂直方向のディメンションは、包含するdivよりも大きくなります。ここでは、2つのクラスが

.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> 

は、セクション内の画像を維持する方法はありますでしょうか？画像を翻訳して拡大縮小することができます。これは、セクション内にあるように画像を拡大することができますが、あらかじめ画像サイズがわかっている場合にのみ機能します。私はサイズに依存しない信頼できる方法を持っていたいと思います。

Answer 1

親には、overflow: hiddenのスタイルを指定します。兄弟要素が重なっている場合は、高さ/幅が固定されたコンテナの内側に配置し、スタイルをoverflow: hiddenにする必要があります。

Answer 2

画像が正方形でなく、ブラウザがそのように調整されるような不具合があります。 回転後、画像の余白を変更して寸法を保持します。

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

額は、画像の高さx幅の違いによって異なります。 marginパラメータを認識させるには、display:inline-block;またはdisplay:blockを追加する必要があります。