使用css自動調整背景圖像

我有以下代碼上傳background image。使用css自動調整背景圖像

<input type='file' onchange="readURL(this);" />

我使用的腳本是：

function readURL(input) { 
      if (input.files && input.files[0]) { 
       var reader = new FileReader(); 

       reader.onload = function (e) { 

        $('#myframe') 

        .css({ 
        background:'url('+e.target.result +') left top no-repeat', 
        background-size:'400px 400px' 

        }); 

       }; 

       reader.readAsDataURL(input.files[0]);//To display images uncomment this 
      } 
     }

有一個problem.Above代碼的工作，如果我刪除background-size。我想縮小我上傳的圖片的尺寸和分辨率。這裏$('#myframe')是div id的區域，我想上傳。另外，讓我知道如何將multiple屬性傳遞給.css()函數。我嘗試了相同下面的代碼，但沒有效果：

.css(background:transparent url('+e.target.result +') left top no-repeat,background-size:200px 300px);

來源

2014-06-14 MS Wachasunder

您可以創建一個js小提琴請 –

您的問題是background是一個超級屬性，並將其重置background-size，放置background-sizebackground後。

所以你的情況，你想：

$('#myframe') 
    .css('background', 'transparent url('+e.target.result +') left top no-repeat') 
    .css('background-size', '200px 300px');

看到這個職位background overwrites background-size

而且css傳遞多個屬性，你只是傳遞一個對象。看看文檔http://api.jquery.com/css/

來源

2014-06-14 11:12:01 GillesC

我想這 \t $（ '＃myframe'） \t \t \t \t \t \t的.css（ '背景大小'， '100像素30像素'） \t \t \t \t \t \t .css（'background'，'transparent url（'+ e.target.result +'）left top no-repeat'）; –

這兩個.css應用於相同的選擇器#myframe仍然沒有顯示 –

@MS Wachasunder是的這是另一個問題，已解決某處更新的答案與信息和鏈接 – GillesC

我創建從一個e.target.result的jsfiddle http://jsfiddle.net/kHqLE/2/

的輸出是不是圖像對象時，其原始字符串。

來源

2014-06-14 12:44:18

收回我的話！ –

背景大小不工作... –

@all我已經更新小提琴和它的工作了。 –

使用css自動調整背景圖像

回答

相關問題