17

親内の子に適用する適切なスケールを計算しようとしていますが、CSS 関数calc()内では使用できません。transform: scale私はこの機能を JavaScript で実行しましたが、スクリプトでページが肥大化するのをできるだけ避けるために、純粋な CSS ソリューションに興味があります。

例: CSS

   .anyclass{
     height:250px; /*this value can change dinamically */
     transform:scale(calc(100% / 490 )); /*is using height value*/
   }

この定義は、無効なプロパティ値を返します。翻訳のような他の用途:

.anyclass{
transform:translate(calc(100% - 50px ));
}

問題なく動作します。CSSのみを使用してdivの正しいスケールを計算するためにcalcを使用できる方法はありますか?

編集：それをよりよく説明するために、計算がそれを行うので、0と1の間の値を見つけることは問題ではありません。パーセンテージを使用すると、無効なプロパティ値が取得されます。

テスト 1 CSS3 変数で試してみましたが、Scale 関数で結果が得られませんでした

--height: calc(100% + 0px);
/* height: calc(var(--height) / 490); Calculates the right value: 0.5 */
--soom: calc(var(--height) / 490);
/* height: var(--soom); has the right value: 0.5 */
transform: scale(var(--soom)); /*Does not operate in the value stored in --soom*/

クロムの値を受け入れるようですが、スケールを操作しません。

ZOOM CSS プロパティは、chrome thou でのみ正常に動作するようです。これはうまくいきます。

zoom: calc(100% / 1.490); /* It needs the original value to be divided by 1000 to work properly*/

作業例:

Url: MiWeb では、クラスが class="cs_6c537e46d973809bcbd9abb882d9c7db cssprite" の DIV には、スプライトをソースとして使用するため、background-image プロパティがあります。 CSS

background-position: 0 -840px;
    width: 800px;
    height: 490px;
    background-image: url(https://cdn.arturoemilio.es/wp-content/cache/CSS_Sprite/93db60ac3df9134d96d56dd178d4ebf3279fdb39_S.png);
    background-repeat: no-repeat;
    display: inline-block;
    position: initial;

現在、元の画像は目に見える div よりも大きくなっています。JS(height:250px aprox)がブロックされているブラウザーとの互換性を高めるために JS の使用を避けたいので、CSS のみを使用して画像をスケーリングしたいと思います。

その背景画像を適切なサイズにスケーリングしたいのですが、正しい値は 250px / 490px ( scale(calc(100% / 490) ) です。CSS は出力前および CMS の他の部分で生成されるため、できません。 CS ルールが生成されるときの親 DIV の実際のサイズがわかります。

4

5 に答える 5

2

使用できますが、パーセンテージは使用できcalcませんtransform:scale

ただし、1 = 100% と考えてください。したがって、 の値が100%変化すると、 の値1も変化します。

例: 100% = 450px で、その値が 250px に変更された場合、1 = 250px = 100% の値

こちらをご覧ください

コード:

.parent {
 width:200px;
 background:blue;
 height: 100%;

}

.child {
  transform:scale(calc(1/2));
  background:red;
}

本当にパーセンテージを使用したい場合は、JQを使用する必要があります

または、パーセンテージだけが必要だと思われる実際の例を教えてください

編集 ：

あなたの例のために。これを使って

.et_pb_portfolio_item:last-child .et_pb_portfolio_image.landscape > div {
   background-position:center center!important;
   width:100%!important;
   height:100%!important;   

}
于 2016-07-05T14:56:10.660 に答える
0

calc()これは、ホバーセレクターがある場合とない場合の両方で機能することを試してください。scale(0,1)ただし、 との間の値を使用する必要があるため、既に割り当てられている値を使用する必要があり0ます1。px使用または値する必要がある翻訳についても同じです%。

.any{
     height:250px; /*this value can change dinamically */
     background:#f22;
    transform:translate(calc(100px - 50px));
   }
   .any:hover{
   transform:translate(calc(100px - 80px)); /*is using height value*/
   }

規模

  .any:hover{
       transform:scale(calc(1/2));
}
于 2016-07-05T14:56:56.487 に答える
0

スケールは 0 から 1 の間の浮動小数点数である必要があります。transform: scale(calc(1 / 2))代わりに使用してください: https://jsfiddle.net/L1w7501o/

于 2016-07-05T14:27:02.537 に答える