如何在推动底部（未知分辨率）时水平居中图像并在 window 太窄时保持居中

Question

假设我有一张未知分辨率的图像。我想将它水平居中，即使 window 比图片窄，并推动 window 的底部以适合此图片的高度。

如何仅使用 css 来实现？（没有javascript）

很明显，图片将放在标签中，因为这是推底的唯一方法。居中对齐很容易，困难的部分是保持居中 就像 background-position:center top 因为当简单地居中这个标签时它会碰到window 而不是溢出隐藏并保持居中。

谢谢！

Answer 1

如果您想使用 img 标签执行此操作，您可以使用以下两个代码：

object-fit:cover;
object-position:50% 50%;

这些与背景大小和背景位置几乎相同。

例如，这将如何在代码中完成：

html,body {
  width: 100%;
  height: 100%
}
img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  float:left;
}
div {
  width: 100%;
  height: 100%;
  background: #222;
  display:flex;
  color:#fff;
  align-items:center;
  justify-content:center;
}

<img src="https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg" alt="Rafael De Jongh - Glitch Skull"/>
<div>  
  <p>Other Content</p>
</div>

您也可以在 JSFiddle

上查看

如果您确实想要将视口宽度和高度设置为 100% 的完整流体背景图像，您也可以通过以下代码执行此操作：

html,body {
  width:100%;
  height:100%
}
#img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  background-image:url(https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  float:left;
  display:inline-block;
}
#content {
  width:100%;
  height:100%;
  background: #222;
  display:flex;
  color:#fff;
  align-items:center;
  justify-content:center;
}

<div id="img"></div>
<div id="content"><p>Other Content</p></div>

Also on JSFiddle

如有任何问题，欢迎随时提问！

Answer 2

瞧： https://jsfiddle.net/gwja6f6z/

HTML:

<div id=main>
    <div id=imgwrp>
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Ingres%2C_Self-portrait.jpg" border=0>
    </div>
</div>

<p>
The picture stays center and does not hit the borders of the window when window is too narrow, and this text is pushed without knowning the height of the picture.
</p>

CSS:

html, body {
  width:100%;
  height:100%;
  text-align:center;
  overflow-x:hidden;
}

#main {
  position:relative;
  left:50%; /* This div is just a 0px width line in middle of window  */
  width:0;
  overflow-x:visible;
  text-align:center;
}

#imgwrp {
  display:inline-block; /* Image container width is same as image itself */
  position:relative;
  margin:0 auto 0 auto;
}

#imgwrp img {
  display:block;
  position:relative;
  margin-left:-50%; /* The image is pushed left by 50% its container width */
}

如何在推动底部（未知分辨率）时水平居中图像并在 window 太窄时保持居中

How to center an image horizontally while pushing the bottom (unknown resolution) and keep centered if window is too narrow

html

css

image

background-position