在 HTML 视口中居中图像（无 JavaScript）答案

【问题标题】：Center image in HTML viewport (without JavaScript)在 HTML 视口中居中图像（无 JavaScript）
【发布时间】：2012-09-21 20:03:05
【问题描述】：

我想在浏览器中显示一张图片：

如果图像小于浏览器视口，则图像居中水平和垂直。
如果图像大于视口，则缩小图像以填充在不调整纵横比的情况下尽可能多的视口图片。同样，图像水平和垂直居中。

我不想使用 JavaScript；什么是最好的/最语义化的 HTML 和 CSS？

更新有人要求我澄清语义：图像就是内容； HTML 中的唯一内容。

解决方案

@GionaF 的想法让我得到了一个快乐（并且非常简单）的解决方案：

HTML

<!DOCTYPE html>
<head>
  <title></title>
  <LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>
      <img src="photo.jpg" alt="photo" />
    </div>
</body>

CSS

img {
    max-width:100%;
    max-height:100%;
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

【问题讨论】：

没有 JavaScript？如果您不知道图像的高度和/或宽度，则不可能
CSS 不能处理if 条件。它完全按照您的指示去做。
这是可能的。只需要 IE8 及更低版本的解决方法。

标签： html css image viewport

【解决方案1】：

除非您为容纳图像的容器设置了高度，否则您将无法完成此操作。为了让视口知道图像的居中位置，它需要知道您正在使用的全高，而不是保持与图像相同的大小。只有在被告知或有实际内容填满时，高度才会扩大。

要水平居中，您需要在图像周围设置一个容器，并将其边距设置为“0，自动”。将容器内的图像宽度设置为 100%（这将保持比例正确，因为高度将随之适当缩放），并为容器提供基于百分比的宽度。

【讨论】：

感谢您的评论。我永远不会提前知道图像的大小或视口的大小......所以你说这是不可能的？
正确，至少不是垂直方面。宽度对浏览器来说是没有问题的，但是你真的需要有垂直高度的细节，或者填充空间的内容，否则浏览器会截断它。 JS 确实为此提供了解决方案，但如果您只需要 CSS 和 HTML，则需要提供有关内容大小的更多信息。
仅供参考 - 我想我已经完成了；查看问题的最新版本。

【解决方案2】：

你需要为你的图片或环绕 div 设置一个宽度和高度作为 margin: auto 以使图片居中。看看下面的代码是如何为你工作的。

CSS

#container {
width: 1000px;
height: 1000px;
}

#img {
    background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}

HTML

<div id="container">

<div id="img">

</div>

编辑

将图像设置为背景？然后将 body 设置为 100%。

body
{
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* you know... don't repeat... */
    background-position: center center; /*center the background */
    background-attachment: fixed; /*don't scroll with content */
}

【讨论】：

谢谢，但这不会总是渲染一个 100x100px 的图像吗？
是的，我只是以它为例。你能把图片设置为背景吗？我已经编辑了以上内容
感谢 Michael - 如果我的首选解决方案存在尚未发现的问题，这似乎是一个不错的第二选择。

【解决方案3】：

我无法找到完美的解决方案（根据我的阅读，仅使用 CSS 和 HTML 是不可能做到你想要的）。但我找到了更接近您需要的解决方案。我再说一遍，它并不完美。就这样（你实际上把你的图片作为div的背景）：

#mydiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(photo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 98%, cover;
}

所以，这里的关键是background-size 属性。它在这里做什么：强制图像缩放（向上或向下）到 div/容器的宽度/高度的指定百分比（div 的宽度和高度由视口决定）。对于大于视口的图像，此解决方案很好，但问题在于较小的图像（按比例放大）。不幸的是，当前的 CSS 实现不允许为 background-image 指定 max-height 或 max-width。如果您想了解更多关于此主题的信息，请打开此网页：http://www.css3.info/preview/background-size/。

无论如何，JavaScript 解决方案更好。希望对您有所帮助。

【讨论】：

感谢 CodeNighter - 如果我的首选解决方案有一个尚未发现的问题，这似乎是一个不错的第二选择。

【解决方案4】：

您可以通过多种方式实现它，但我不能在不知道上下文的情况下“语义化”（图像是页面的主要/唯一内容吗？？它在博客文章的中间吗？），所以我会去div。

1。 `position:absolute;` + `margin:auto;`

支持：跨浏览器

HTML

<html>
<body>
    <div id="container">
        <img src="your-image.jpg">
    </div>
</body>
</html>

CSS

html,body,#container {
    height:100%;
}
#container {
    width:100%;
    position:relative;
}
#container > img {
    width:100%;
    max-width:400px; /* real image width */
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
}

Demo

2。 `display:table;` + `display:table-cell;` + `vertical-align:middle;`

支持：IE8+，所有其他浏览器 - IE7 后备 (Source 1) (2) (3)

HTML

<html>
<body>
    <div id="container">
        <span> /* it's important that you use a span here
                  not a div, or the IE7 fallback won't work */
            <img src="your-image.jpg">
        </span>
    </div>
</body>
</html>

CSS

html,body,#container {
    height:100%;
}
#container {
    width:100%;
    display:table;
    *display:block; /* IE7 */
}
#container > span {
    display:table-cell;
    *display:inline-block; /* IE7 */
    vertical-align:middle;
    text-align:center;
}
#container > span > img {
    width:100%;
    max-width:400px; /* real image width */
}

Demo

3。 `background-size:contain;`

支持：IE9+，所有其他浏览器 - 带有供应商前缀 (Source 1) (2)

HTML

<html>
<body>
    <div id="container"></div>
</body>
</html>

CSS

html,body,#container {
    height:100%;
}
#container {
    margin:0 auto;
    max-width:400px; /* real image width */
    background:url(your-image.jpg) 50% 50% no-repeat;
    background-size:contain;
}

Demo

注意 IE8 如何渲染height:auto;，可能无法保持比例。

编辑：我刚刚意识到您写了“没有调整图像的纵横比”。如果你真的不想保持这个比例，那就更容易了……但你真的是那个意思吗？

【讨论】：

感谢这些 - 我将尝试一下。我确实想保持纵横比。回复：语义 - 图片是内容，是页面上唯一的内容。
@Mike 那么，一个 div 就可以了 ;-) 如果它们不起作用，请添加您的完整页面代码。
感谢您的帮助：让我足够接近我现在添加到问题中的解决方案。

解决方案

HTML

CSS

CSS

HTML

编辑

1。 position:absolute; + margin:auto;

2。 display:table; + display:table-cell; + vertical-align:middle;

3。 background-size:contain;

1。 `position:absolute;` + `margin:auto;`

2。 `display:table;` + `display:table-cell;` + `vertical-align:middle;`

3。 `background-size:contain;`