Question

在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>

我的屏幕尺寸为1366x768，它显示完整的图像宽度，但显然不是完整的高度。现在div显示了图像的一部分，我希望它即使我改变浏览器大小也能准确显示图像的那一部分。现在发生的事情是，如果我更改浏览器大小（宽度小于正常值），div会调整大小并且图像也会调整大小，但调整大小的图像现在会显示之前看不到的图像部分。

我如何获得图像的相同部分（仅此而已），就像我进入最大化的浏览器窗口一样。

Answer 1

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

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

它工作正常。我已添加下面的代码段。

＆＃13;

html,body{
  height:100%;
  width:100%;
  }
#imageHolder{
           width:100%;
           height:100%;
          /* background-image: url("https://i.stack.imgur.com/wwy2w.jpg");
           background-repeat:no-repeat;*/
  background: url("https://i.stack.imgur.com/wwy2w.jpg") no-repeat center center fixed; 
           background-size:cover;
  border:1px solid #000;
           
     }

＆＃13;

<div id="imageHolder"></div>

＆＃13;

Answer 2

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

您可以使用顶部，底部，左侧和右侧替换中心，以在调整大小时获得所需图像的更精确部分。

Answer 3

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

768窗口高度* 30％高度= 230像素（高度）

230 px高度/ 1366 px宽度= 0.168

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

在此布局中，将始终显示图像的顶部。这就是你提出的问题，因为默认情况下它是在开头看到的。

如果您想要看到图像的其他部分，请相应调整背景位置

＆＃13;

html,
body {
  width: 100%;
  margin: 0px;
  
}
#imageHolder {
  background-size: 100% auto;
  background-image: url(http://lorempixel.com/1900/1080);
  width: 100%;
  height: 0px;
  padding-top: 16.86%;
}

＆＃13;

<div id="imageHolder"></div>

＆＃13;

Answer 4

使用此

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

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

4 个答案: