我可以在Transform中使用Calc：Scale函數在CSS中嗎？

我試圖計算適用於兒童的父母中右邊的刻度，但我不能使用calc()內transform: scale CSS功能。我已經使用javascript完成了這個功能，但是我對純粹的CSS解決方案感興趣，以避免使用腳本儘可能地膨脹頁面。我可以在Transform中使用Calc：Scale函數在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)); 
}

工作沒有問題。有反正我可以使用calc來計算正確的比例使用唯一CSS的div？

編輯：爲了更好地解釋它，在計算過程中findind一個介於0和1之間的值不是問題。如果我使用百分比，我只會得到無效的屬性值。

TEST 1 我試着用CSS3變量沒有結果的尺度功能

--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*/

似乎接受鉻的值，但不工作的規模。

變焦 CSS屬性似乎只在鉻你工作得很好。這工作正常。

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

工作實施例：

在URL：MiWeb 的DIV與類：類= 「cs_6c537e46d973809bcbd9abb882d9c7db cssprite」具有背景圖片屬性，因爲它使用的子畫面作爲源。 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更大（高度：250像素aprox的），我想只用CSS來縮放圖片，因爲我想避免使用JS與JS屏蔽的瀏覽器更好的兼容性。

Id喜歡該背景圖像縮放到合適的大小是正確的值將是250像素/ 490px（規模（計算值（100％/ 490））。在輸出之前，將生成的CSS和在其它部位的CMS，所以我無法知道生成CS規則時父DIV的實際大小。

來源

2016-07-05 Andu

比例應該是0到1之間的浮點數。使用transform: scale(calc(1/2))代替：https://jsfiddle.net/L1w7501o/

來源

2016-07-05 14:27:02 powerbuoy

但是，如果我想使用百分比，而不是一個固定值？因爲我正在計算基於div高度的內容的比例？ – Andu

我不確定我是否理解爲什麼您必須使用（例如）100％或64％或30％，而不是僅使用1,0.64和0.3？ – powerbuoy

你可以使用calc，但你不能在transform:scale

使用個只是覺得1 = 100％，因此如果100%變化的價值，1值將發生變化也

爲例如：如果100％= 450像素，然後將該值變爲250像素，1 = 250像素= 100％的值

看到這裏jsfiddle

代碼：

.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-05 14:56:10

你是對的，我在開篇文章中添加了一個可用的實例，可以訪問我想調整的url。 – Andu

不知道你在那裏做什麼。你想（在右上角的框中）使背景圖像具有容器'et_pb_portfolio_image'的'width'和'height'？ –

是的，精靈的原始剪輯是800 * 490px。放置背景圖像的DIV是330 * 248px。因爲我使用背景圖像和原始圖像是一個雪碧我不能使用background-size：cover;因爲精靈的總大小包含其他圖像。如果你測試添加transform：scale（0.5）到同一個div，我指出你會看到整個圖像如何顯示，現在它只是它的一部分。 – Andu

試試這個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-05 14:56:56 frnt

我需要規模才能工作，而不是像在開場白中寫的那樣翻譯。不過謝謝。 – Andu

@Andu好的。但是在開始時你試圖擴展（100％/ 490）。所以這就是我所說的calc（）與變換一起工作，但是您必須根據規則爲它們分配值。 – frnt

我可以在Transform中使用Calc：Scale函數在CSS中嗎？

回答

相關問題