Javascript div中的背景图像始终显示图像的特定部分（缩放和定位）_Javascript_Jquery_Html_Css_Image

Javascript div中的背景图像始终显示图像的特定部分（缩放和定位）

javascript jquery html css image

Javascript div中的背景图像始终显示图像的特定部分（缩放和定位）,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,在div中用作背景的大小为1900 x 1080的图像 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ background-size:

在div中用作背景的大小为1900 x 1080的图像

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        html,body {
    height:100%;
}
        #imageHolder{
            background-size:100% auto;
            background-image:url(img/bg2.jpg);
            width:100%;
            height:30%;
        }
    </style>
</head>
<body>
    <div id="imageHolder"></div>
</body>
</html>


html，正文{
身高：100%；
}
#图像支架{
背景尺寸：100%自动；
背景图片：url（img/bg2.jpg）；
宽度：100%；
身高：30%；
}

我的屏幕尺寸是1366x768，它显示的是完整的图像宽度，但显然不是完整的高度。现在div显示了图像的一部分，我希望它能够准确地显示图像的这一部分，即使我更改了浏览器的大小。现在发生的事情是，如果我更改浏览器大小（比正常宽度小），div会被调整大小，图像也会被调整大小，但是调整大小的图像现在显示了图像中以前不可见的部分

如何获得与在最大化浏览器窗口中相同的图像部分（仅此而已）。

您可以将下面给出的css属性添加到样式表中

background-repeat:no-repeat;
background-size:cover;

它工作得很好。我添加了下面的代码片段

html，正文{
身高：100%；
宽度：100%；
}
#图像支架{
宽度：100%；
身高：100%；
/*背景图像：url（“https://i.stack.imgur.com/wwy2w.jpg");
背景重复：无重复*/
背景：url（“https://i.stack.imgur.com/wwy2w.jpg）没有固定的重复中心；
背景尺寸：封面；
边框：1px实心#000；
}

使用此

#imageHolder{
            background-image:url(img/bg2.jpg);
            width:100%;
            height:30%;
            background-size: cover;
        }

您可以使用“上”、“下”、“左”和“右”替换“中心”，以便在调整大小时获得所需图像的更精确部分。

您描述的初始布局的高宽比为

768窗户高度*30%高度=230像素（高度）

230像素高度/1366像素宽度=0.168

现在，让我们使用填充技巧为div设置此比率：

在此布局中，图像的顶部将始终显示。这是您所要求的，因为它是默认情况下在开始时看到的

为了防止你想看到图像的另一部分，相应地调整背景位置

html，
身体{
宽度：100%；
边际：0px；
}
#图像支架{
背景尺寸：100%自动；
背景图片：url(http://lorempixel.com/1900/1080);
宽度：100%；
高度：0px；
垫面：16.86%；
}

您将使用

背景位置

属性。默认情况下，图像是按左上角对齐的，但您可以将其更改为

50%50%

（中间/中间）或

50%100%

（中间/底部）等。这一个问题与我面临的问题相同，当您开始调整浏览器窗口的大小时，更多图像变为可见，这是以前不可见的（全宽）除非我将浏览器窗口缩小到最小宽度，然后显示完整的图像，否则我不想显示图像的那些部分（以前不可见）。@新手立即检查否它不起作用。它根据窗口的大小或多或少地包含图像。我想显示完全相同的图像。它可以是坐标方面的特定窗口吗？是的，你可以做百分比，甚至像素等。如果你想了解更多信息，请阅读这里：[链接]我想，凭借你的技术，我很快就能得到我想要的。唯一的问题是它没有显示完整的图像宽度。我不知道如何显示，但它应该显示图像（大于屏幕大小）缩放，以适应屏幕（100%宽度）。

background-repeat:no-repeat;
background-size:cover;
background-position: center center;