使用css自动调整背景图像 [英] Auto adjust background image using 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]）; //显示图片uncomment this 
} 
} 
  pre> 
 
 
有一个问题。如果我删除 background-size ，我想减小我上传的图片的大小和分辨率。这里 $（'＃myframe'）是 div id 此外，让我知道如何将多个属性传递到 .css（）函数。我尝试下面的代码相同，但没有效果：
  .css（background：transparent url（'+ e.target .result +'）left top no-repeat，background-size：200px 300px）; 
  
 
 
解决方案
您的问题是 是一个超级属性，它重置 background-size ，放置 background-size  code> background 。
 
 
 
在您的情况下，您需要：
  $（'＃myframe'）
 .css（'background'，'transparent url（'+ e.target.result +'）left top no-repeat'）
 .css（'background-size'，'200px 300px'）; 
  
查看此帖子 background覆盖background-size  
 
 
 
和 css 属性，你只需传递一个对象。请参阅文档 http://api.jquery.com/css/  
 
I have the following code for uploading background image.
<input type='file' onchange="readURL(this);" />
The script I'm using is:
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
            }
        }
There is a problem.Above code works if I remove background-size. I want to reduce the size and resolution of the image I'm uploading. Here$('#myframe') is div id of the the area, where I want to upload. Also, let me know how do I pass multiple properties to .css() function. I tried the following code for the same, but no effect:
.css(background:transparent url('+e.target.result +') left top no-repeat,background-size:200px 300px);

解决方案
Your problem is that background is a super property and it reset background-size, place background-size after background.

So in your case you want:
$('#myframe')
    .css('background', 'transparent url('+e.target.result +') left top no-repeat')
    .css('background-size', '200px 300px');
See this post background overwrites background-size

And css to pass multiple properties you simply pass in an object. See documentation http://api.jquery.com/css/

                        
这篇关于使用css自动调整背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！