将图像水平放置在顶部，不占用空间

Question

我需要将2000x2000px图像水平居中到网页。从那里我想要图像的中心拥抱页面的顶部。最后，我不希望图像占用页面上的空间，但我仍然希望它可见。下面是我想象我想要的图像。

Answer 1

如果你的代码是

<div class="img-container">
    <img></img>
<div>

将您的css修改为：

img.container{ 
    overflow:hidden;
}

img.container img{
    margin-top:-200px;
    width:100%;
}

您可以根据自己的喜好调整保证金。

Answer 2

尝试类似https://jsfiddle.net/2Lzo9vfc/117/

的内容

<强> HTML

<div class="div">
    <img src="http://placehold.it/400x300" alt="">
</div>

<强> CSS

.div {
  position: relative;
  border: 1px solid black;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-repeat: no-repeat;
}

.div img {
  position: absolute;
  top: -50%;
  left: calc((400px - 300px) /-2); 
}

calc中的第一个值应该是您图片的width，第二个值应该是您父width的{​​{1}}