Question

任何人都可以解决我关于javascript的问题。我正在解释我的故事并提供下面的代码片段。

故事：

实际上我有一个大尺寸/任何尺寸的图像，我想把它固定为另一个尺寸（尺寸-300 * 190）固定的div的背景图像。图像不应该失去它的质量，需要正确显示。我已经编写了一些代码，但无法将其修复为背景图片。请通过查看下面提供的代码帮助我解决此问题。

我的代码片段：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Image path</title>
    <style>
    .main{
        height:190px;
        width:300px;
        border:#00F 2px solid;
        border-radius:8px;
    }
    </style>
    </head>

    <body>
    <div class="main" id="img"></div><br />
    <div>
    <button type="button" id="btn">ADD</button>
    </div>
    <script>
    document.getElementById('btn').onclick=function(){
        var rootImage=getProperImage("../../manju_w5call.jpg");
        console.log('proper',rootImage);
        var string="url('"+rootImage+"')";
        document.getElementById('img').style.backgroundImage=string;
    }
    function getProperImage(image){
        console.log('actualy iamge',image);
        var curH;
        var curW;
        var myImage=new Image();
        myImage.src=image;
        function uploadImage(){
        myImage.onload=function(){
            curH=myImage.height;
            curW=myImage.width;
            console.log('height and width',curH,curW);
            var newSize = scaleSize(300, 190, curW, curH);
            this.setAttribute("src", "../../manju_w5call.jpg");
            this.setAttribute("height", newSize[1]);
            this.setAttribute("width", newSize[0]);
            console.log(myImage.src,myImage.width);
        }
        return myImage;
        }
        var text=uploadImage();
        console.log('text',text);
        return text
    }
    function scaleSize(maxW, maxH, currW, currH){
        console.log('scale');
        var ratio = currH / currW;
        console.log('The ratio is',ratio);
        if(currW >= maxW && ratio <= 1){
            currW = maxW;
            currH = (currW * ratio)+19;
        }else if(currH >= maxH){
            currH = maxH;
            currW = currH / ratio;
        }
        return [currW, currH];
    }
    </script>
</body>
</html>

我无法在此获得正确的图像。请帮我重新调整图像大小而不会丢失图像并正确显示为背景图像。

Answer 1

因为它是背景图片，所以它不应该与div分开

将CSS中的图片设置为background-image并指定background-size的{{1}}属性

Answer 2

#container {
  position   : relative; 
}

#background {
  position   : absolute; 
  color      : white;
}

#content {
  position   : absolute; 
}

<div id="container">
  <img id="background" src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" alt="&nbsp;" />
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at enim mollis, imperdiet urna at, tincidunt massa. Cras efficitur, metus vitae fermentum ultrices, neque enim egestas purus, id blandit orci est vitae quam. Duis auctor neque bibendum neque accumsan, nec aliquam velit consequat. Morbi convallis sem libero. Mauris facilisis pretium elit non mollis. Mauris tempor tristique efficitur. Mauris augue erat, elementum nec blandit ac, tempus et velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mollis dolor vitae purus efficitur, eu imperdiet justo feugiat. Morbi turpis purus, sollicitudin non hendrerit vitae, placerat eu eros. Nullam efficitur, diam fringilla auctor fringilla, mi est consequat erat, nec ornare orci quam iaculis mi. Ut at sollicitudin dolor, a bibendum risus. 
  </div>
</div>

如何使用javascript将一个图像元素设置为另一个div的背景图像

2 个答案: