我正在寻找一种方法来获取background-position:"center"代码上的<img>行为。
以下是工作：http://ns366377.ovh.net/siow/perso/kuala/
基本上，我希望我的第一个内容块（图片diaporama）与我上一个内容块（一张飞机的图片）具有相同的行为。
有问题的行为：
该块具有一定的高度（对于平面块，它是600px，对于第一个内容块，它是$(window).height();）
在调整大小时，图片保持用户的最大浏览器宽度capaticy。换句话说，用户将只能看到图片的一部分（在这种情况下是中间）。图片不会改变宽度。
有什么想法吗？提前谢谢！
答案 0 :(得分：0)
如果我找到了你，你想要将图像置于滑块中心。 如果“第一个块”中的图像具有相同的宽度（1366px），则可以添加此图像。
HTML：
<img src="somePic.png" alt="" id="1" class="fade images" style="height: 572px; width: 1366px;">
CSS：
.images {
margin-left: calc(50% - 683px);
}
但是如果你有不同宽度的图片，你可以使用JavaScript甚至jQuery。这里是jQuery解决方案。
jQuery的：
var getWidthOfImage = $('.images').css('width');
var calcLeft = getWidthOfImage/2;
$('.images').css('left', 'calc(50% - ' + calcLeft + ')');
修改
所以我再次阅读了这个问题，你说图像的宽度将根据浏览器的宽度调整大小。所以，如果你这样做，你不需要居中。最后的“最后一个内容块”不会调整大小，这就是它看起来更好的原因。我建议你把sesize-function取出来。如果你想让它居中。并且普通用户不会调整窗口大小。
答案 1 :(得分：0)
为<img />提供固定宽度，绝对位置，并将<img />的左侧边距放在<img />的中间位置：
<强> CSS：
img {
position: absolute;
top: 0;
left: 50%;
width: 1366px;
margin-left: -683px;
}
答案 2 :(得分：0)
使用CSS3，您可以使用background-size:cover或background-size:contain
http://www.w3schools.com/cssref/css3_pr_background-size.asp