用css将图像保持在中间[关闭]答案

【问题标题】：Keep image in the middle with css [closed]用css将图像保持在中间[关闭]
【发布时间】：2014-08-13 17:01:36
【问题描述】：

我希望 <img> 标记在加载时正好是浏览器窗口的 100% 宽度，但是当窗口调整大小（缩小到移动宽度）时，图像停留在窗口的死点，保持不变大小和边缘被切断。你能用css做到这一点吗？如果有，怎么做？

【问题讨论】：

尺寸不变？你的意思是在桌面大小的屏幕上？
是的，不能调整大小。所以只有中间部分是可见的
stackoverflow.com/questions/10830735/…
@Paulie_D 我认为这与 OP 试图实现的效果不同，在该解决方案上，图像不会保持居中。
那么也许这个 - stackoverflow.com/questions/1344169/… 但是，将图像替换为 div 并按照您的建议将图像用作该 div 的 bg 图像会更有意义，

【解决方案1】：

到目前为止，最简单的方法是设置div 与background-image 和background-position: center，这将达到预期的效果。

div {
    background: url([imageurl]) no-repeat top center;
    width: 100%;
    height: [imageheight];
}

Demo

【讨论】：

【解决方案2】：

我强烈建议在这些场合使用background-size: cover。

html { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

（取自here）

【讨论】：

但请记住，这是一个图像标签，而不是背景图像。它仅位于页面顶部。我已经在使用另一张图片（带有背景重复的小徽标）作为我的背景
@MarcoPrins 然后将<img> 替换为以图像为背景的<div>。您可以在多个元素上使用背景属性
或使用双背景图片