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

【问题标题】：Background image in a div to always show a specific portion of image (scaled and positioned)div 中的背景图像始终显示图像的特定部分（缩放和定位）
【发布时间】：2023-03-26 05:56:01
【问题描述】：

在 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 会调整大小并且图像也会调整大小，但是调整大小的图像现在会显示以前不可见的图像部分。

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

【问题讨论】：

您可以使用background-position 属性。默认情况下，图像按左上角对齐，但您可以将其更改为50% 50%（中心/中心）或50% 100%（中心/底部）等。

标签： javascript jquery html css image

【解决方案1】：

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

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

它工作正常。我在下面添加了sn-p。

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;
           
     }

&lt;div id="imageHolder"&gt;&lt;/div&gt;

【讨论】：

这个问题和我遇到的一样，当你开始调整浏览器窗口的大小时，更多的图像变得可见，这在我将浏览器窗口缩小到最小宽度之前是不可见的（全宽）然后显示完整的图像，我不想显示图像的那些部分（以前不可见）。
@Novice 立即查看
不，它不起作用。它包括基于窗口大小的或多或少的图像。我想显示完全相同的图像。

【解决方案2】：

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

您可以将中心替换为顶部、底部、左侧和右侧，以便在调整大小时获得更精确的图像部分。

【讨论】：

在坐标上可以是特定的窗口吗？
是的，你可以做百分比甚至像素等。如果你想了解更多信息，请在此处阅读：[link]w3schools.com/cssref/pr_background-position.asp

【解决方案3】：

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

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

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

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

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

如果您希望看到图像的另一部分，请相应地调整背景位置

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%;
}

&lt;div id="imageHolder"&gt;&lt;/div&gt;

【讨论】：

我想，以你的技术，我很接近得到我想要的东西。唯一的问题是它没有显示完整的图像宽度。我不知道如何，但它应该显示图像（大于屏幕尺寸）缩放以适合屏幕（100% 宽度）。

【解决方案4】：

使用这个

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

【讨论】：