web-dev-qa-db-ja.com

CSS3変換scale（）を使用して、DOM要素とそれが占めるスペースをスケーリング/ズームします。

私のページの真ん中には、いくつかのコンテンツ（他のdiv、画像など）を含むdiv要素があります。

<div>
    before
</div>
<div id="content-to-scale">
    <div>something inside</div>
    <div>another something</div>
</div>
<div>
    after
</div>

その要素（コンテンツスケール）とそのすべての子をスケーリングしたいと思います。 CSS3トランスフォームのスケール操作の仕事のようです。ただし、問題は、これがその要素階層の視覚化の変換にすぎず、ページ上の要素のスペース（または位置）の量が変更されないことです。つまり、その要素を拡大すると、「前」および「後」のテキストと重複します。

視覚的表現だけでなく、占有されているスペースの量もスケーリングする簡単で信頼できる方法はありますか？

JavaScriptを使用しない純粋なCSSの追加ポイント。 正しいことを実行するソリューションのさらに多くのポイントは、回転や傾斜などの他の変換関数を使用します。これはCSS3変換を使用する必要はありませんが、最近のすべてのHTML5対応ブラウザーでサポートされる必要があります。

htmlcssscalecss-transforms
38
kanaka

HTML（ありがとうRory）

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
  <title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>

  <div id="wrapper">
    <div class="surrounding-content">
      before
    </div>

    <div id="content-to-scale">
      <div>something inside</div>
      <div><img src="http://placekitten.com/g/150/100"></div>
      <div>another something</div>
    </div>

    <div class="surrounding-content">
      after
    </div>
  </div>

</body>
</html>

CSS（まだロリーのベースから始まった）

body {
  font-size: 13px;
  background-color: #fff;
}
#wrapper {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 0.07692307692307693em solid #888;
  padding: 1.1538461538461537em;
}
.surrounding-content {
  border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
  border: 0.07692307692307693em solid #bbb;
  width: 10em;
}
#content-to-scale {
  font-size: 1.1em;
}
#content-to-scale img {
  width: auto;
  height: auto;
  min-width: 100%;
  max-width: 100%;
}

説明：

フォントサイズとemsを使用して、子要素の寸法を「スケーリング」します。

Emsは、現在のコンテキストのフォントサイズに関連する寸法単位です。

したがって、13pxのフォントサイズと13（現在のコンテキストのフォントサイズもピクセル単位）で割った1（ピクセル単位の希望のボーダー幅）のボーダーがある場合、0.07692307692307693emブラウザは1pxをレンダリングする必要があります境界

15pxのパディングをエミュレートするには、同じ式を使用します（望ましいピクセル）/（現在のコンテキストのフォントサイズ（ピクセル単位））=望ましいem。 15/13 = 1.1538461538461537em

画像のスケーリングを飼いならすために、私は私の昔からのお気に入りを使用します。自然の比率を維持するスケールです。説明しましょう。

画像には自然な高さと幅、およびそれらの間の比率があります。幅と高さの両方が自動に設定されている場合、ほとんどのブラウザはこの比率を維持します。次に、希望の幅をmin-widthとmax-widthで制御できます。この場合、自然な幅を超えて拡大縮小する場合でも、常に親要素の全幅に拡大縮小します。

（max-widthとmax-height 100％を使用して、画像が親要素の境界線からはみ出るのを防ぐこともできますが、本来のサイズを超えて拡大縮小することはありません）

＃content-to-scaleのfont-sizeを調整することで、スケーリングを制御できるようになりました。 1.1emはおおよそスケールに等しい（1.1）

これにはいくつかの欠点があります。ems内のネストされたフォントサイズは、再帰的に適用されます。あなたが持っている場合の意味：

<style type="text/css">
    div{
        font-size: 16px;
    }
    span{
        font-size: 0.5em;
    }
</style>
<div>
    <span>
        <span>
            Text
        </span>
    </span>
</div>

あなたが期待するかもしれない8pxの代わりに4pxで「テキスト」レンダリングで終わるでしょう。

10
Lucas Green