32

CSSだけで画像を90度回転させたいです。

回転はできますが、画像の位置が本来あるべき位置ではありません。まず、同じ 内の他のいくつかの要素をオーバーレイし<div>ます。第二に、その垂直方向の寸法は、含まれている よりも大きくなり<div>ます。

2 つのクラスが定義されているコードを次に示します。

.imagetest img {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  width: 100%;
}

.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="https://picsum.photos/200/100"/>
    </div>
  </section>
</article>

画像をセクション内に保持する方法はありますか? セクション内に収まるように画像を変換およびスケーリングできますが、事前に画像サイズがわかっている場合にのみ機能します。サイズに依存しない確実な方法が欲しいです。

4

4 に答える 4

30

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

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

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

于 2014-11-05T00:42:45.533 に答える