Javascript 将背景位置行为与img标记一起使用

我正在寻找一种方法来获得

背景位置：在我的
标签上的“中心”

行为

工作如下：

基本上，我希望我的第一个内容块（图片diporama）与我的最后一个内容块（平面图片）具有相同的行为

有关行为：

• 块具有一定的高度（对于平面块，它是600px，对于第一个内容块，它是

  $（window）.height（）；

  ）

• 调整大小时，图片保持在用户的最大浏览器宽度。换句话说，用户只能看到图片的一部分（在本例中为中间部分）。图片的宽度不变

---

有什么想法吗？提前谢谢

如果我没记错的话，您希望将图像放在滑块的中心。 如果“第一块”中的图像具有相同的宽度（1366px），则可以添加此项

HTML:

但是如果你有不同宽度的图片，你可以使用JavaScript甚至jQuery。这里是jQuery解决方案

jQuery：

var getWidthOfImage = $('.images').css('width');
var calcLeft = getWidthOfImage/2;
$('.images').css('left', 'calc(50% - ' + calcLeft + ')'); 

编辑：

img {
position: absolute;
top: 0;
left: 50%;
width: 1366px;
margin-left: -683px;
}

所以我又读了一遍问题，你说图像的宽度将根据浏览器的宽度调整大小。所以，如果你这样做，你不需要把它居中。最后的“最后一个内容块”不会调整大小，这就是它看起来更好的原因。我建议您去掉sesize函数。如果你想把它居中。普通用户不会调整窗口的大小

< P>给出<代码> <代码>一个固定宽度，绝对位置，并在<<代码> <代码>：

中，将<代码> <代码>的左边边缘放置 CSS:

img {
position: absolute;
top: 0;
left: 50%;
width: 1366px;
margin-left: -683px;
}

---

使用CSS3，您可以使用

背景尺寸：封面

或

背景尺寸：包含

---

谢谢，虽然这不是我想要的，但我对定心元素有了更好的理解。干杯，伙计：）

img {
position: absolute;
top: 0;
left: 50%;
width: 1366px;
margin-left: -683px;
}