web-dev-qa-db-ja.com

CSSはポートレート画像を90度回転し、画像をフルスクリーンにします

私は多くのバリエーションを試しました。要素に背景画像を使用して、htmlimgを使用します。横向きに取り付けられたディスプレイに表示するために、縦向きの画像90を回転させるという考え方です（16：9モニターを横向きに置いた写真）。全画面表示にしたいのですが。これが私の最新の試みです。ビューポートスケーリングを使用していますが、パーセンテージと「カバー」および多くの組み合わせを試しました。私はこれが正しくないことを知っています、これまでのところ何も正しくありませんでした。私がvhとvwの設定を切り替えた理由は、実行中の理論では、画像が横向きに回転されていても、縦向きと思われる画像にスケーリングと変換が適用されるためです。それは混乱し、少しイライラします。ありがとう。

.rotate {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bg {
  background-image: url("http://www.liftedsites.net/images/IMG_7863.jpg");
  height: 100vw;
  width: 100vh;
}
<div class="rotate bg"> </div>
htmlcssrotationfullscreencss-transforms
4
Slid3r

transform-Originを調整し、位置を修正するためにいくつかの変換を追加する必要があります。変換は視覚効果にすぎず、ページのレイアウトを変更しないため、要素によって作成されたオーバーフローを非表示にするには、overflow:hiddenも追加する必要があります。変換前は、ビューポートを反転したため、確実にオーバーフローが発生します。単位：

.rotate {
  transform: rotate(90deg) translateY(-100%);
  transform-Origin:top left;
}

.bg {
  background: url(https://picsum.photos/2000/1000?image=1069) center/cover;
  height: 100vw;
  width: 100vh;
}

body {
  margin:0;
  overflow:hidden;
}
<div class="rotate bg"> </div>
11
Temani Afif