基於原始寬度設置圖片寬度的JavaScript公式，但百分比爲

這看起來很基本，但我無法將頭圍住它。誠實是沒有線索，但我需要的是設置圖像寬度的百分比只是像在CSS文件中，但這次我想知道用來做這件事的方法或技術。基於原始寬度設置圖片寬度的JavaScript公式，但百分比爲

例..

//I have tried this but it didn't work 
 
//var image_width_from_server=(the_img_width_from_php); 
 

 
//image_width_from_server=image_width_from_server/$(parent).width()*90 
 

 

 
//Now the result i get from the console does not match the browser set width of the image's p-ercentage width.

#parent{ 
 
width:250px; 
 
height:250px; 
 
background:deepskyblue; 
 
border:5px; 
 
} 
 

 
#parent img{ 
 
width:90%;/**Now how can i do this in javaScript..?*/ 
 
height:auto; 
 
} 
 

 

 
/**Please note that direct css code won't help. 
 
I need a way in javaScript to set the image's width using percentage but also basing on both the image's width size and the parent width size too. 
 
*/

<div id='parent'> 
 
    <img src='https://i.vimeocdn.com/video/584087165_780x439.jpg'/> 
 
</div>

請注意，直接的CSS代碼也無濟於事。我需要一種方法在javaScript中設置圖像的寬度使用百分比，但也基於圖像的寬度大小和父寬度的大小。

我真的沒有想法，任何幫助表示讚賞。

謝謝

來源

2017-05-10 Dennisrec

首先選擇你的形象，然後你可以設置從js的寬度。

$('#parent > img').css('width', '90%');

來源

2017-05-10 07:34:49 kotapeter

new width =（old width/100）* percentile？

來源

2017-05-10 07:40:02 Divvy

如果你想使用香草的JavaScript，而不是JQuery的，你可以使用.offsetWidth檢索元素的寬度，然後：

var newWidth=document.getElementById("parent").offsetWidth * 0.9; // Get 90% of parent width 

document.getElementById("img").style.width = newWidth + "px"; // Set the new width

另一種簡單的解決方案，避免了使用計算由上直接設置寬度百分比（仍使用香草JavaScript）

document.getElementById("img").style.width = "90%";

來源

2017-05-10 07:40:21

這種計算是沒有必要的。你可以在圖像上應用百分比寬度。 – kotapeter

沒錯，你可以簡單地做'document.getElementById（「img」）。style.width =「90％」'但我認爲這對展示如何獲得元素寬度非常有用。有多種方法可以解決這個問題。 –

基於原始寬度設置圖片寬度的JavaScript公式，但百分比爲

回答

相關問題