41

ページの真ん中に、いくつかのコンテンツ (他の 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 対応ブラウザーでサポートされる必要があります。

4

1 に答える 1

12

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 (まだ Rory のベースから開始)

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 を使用して、子要素の寸法を「スケーリング」しています。

em は、現在のコンテキストのフォント サイズに相対的な寸法単位です。

したがって、font-size が 13px で、border が 1 (必要なボーダー幅 (ピクセル単位)) の場合、13 (現在のコンテキストの font-size もピクセル単位) で割った値 = 0.07692307692307693em ブラウザは 1px をレンダリングする必要があります。国境

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

画像のスケーリングを調整するために、私の古いお気に入りである自然な比率を維持するスケールを使用します。説明させてください。

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

(max-width と max-height 100% を使用して、画像が親要素の境界からはみ出さないようにすることもできますが、自然な寸法を超えて拡大縮小することはありません)

#content-to-scale で font-size を微調整することで、スケーリングを制御できるようになりました。1.1em はほぼ scale(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 での「テキスト」レンダリングになります。

于 2012-08-23T06:53:23.780 に答える