web-dev-qa-db-ja.com

CSSで画像を回転

CSSのみで画像を90度回転させたいのですが。回転はできますが、画像の位置は本来の位置ではありません。 1つ目は、同じdiv内の他のいくつかの要素をオーバーレイし、2つ目は、その垂直方向の寸法がそれを含むdivより大きくなります。ここに私のコードがあります

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

ここで、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;
}

セクション内に画像を保持する方法はありますか？セクション内に収まるように画像を変換および拡大縮小できますが、事前に画像サイズがわかっている場合にのみ機能します。サイズに依存しない信頼できる方法が欲しいです。

cssimagerotationpositiontranslate-animation
15
v923z

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

9
DC_

問題は、画像が正方形ではなく、ブラウザがそのように調整しているように見えます。回転後、画像の余白を変更して寸法が保持されるようにします。

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

量は、画像の高さx幅の違いに依存します。 display:inline-block;またはdisplay:blockを追加して、マージンパラメータを認識するようにする必要があります。

19
James Bone

このトピックは古いことは知っていますが、正解はありません。

回転変換は要素を中心から回転させるため、幅の広い要素は次のように回転します。

enter image description here

申請中 overflow: hiddenは、次のように最長ディメンションを非表示にします。

enter image description here

img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
}
.imagetest{
  overflow: hidden
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>
</div>
</section>
</article>

したがって、私が行うことはいくつかの計算です。私の例では、画像は幅455ピクセル、高さ111ピクセルであり、これらの寸法に基づいてマージンを追加する必要があります。

  • 左マージン：（幅-高さ）/ 2
  • 上マージン：（高さ-幅）/ 2

cSSで：

margin: calc((455px - 111px)/2) calc((111px - 455px)/2);

結果：

enter image description here

img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
  /* 455 * 111 */
  margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />
</div>
</section>
</article>

私はそれが誰かを助けることを願っています！

3
stramin