html - 如何使用内联 HTML 将超大图像置于浏览器窗口的中心？

Question

我试图在浏览器窗口中将 1920 像素宽的图像居中。他们不需要它适合窗口，所以 width:100% 不起作用。我还必须使用内联 html 来执行此操作。我尝试过:vertical-align、text-align、margin-left/right:auto、position和溢出。也许我只是做错了？最新的测试代码如下。我找不到任何以前提出的有效问题，但如果已经有问题，请告诉我。

<div>
    <a title="TITLE" href="{{store direct_url=bras.html}}" target="_self">
        <img style="vertical-align: middle;" title="TITLE" src="/IMAGE/PATH/HERE/MY-IMAGE.jpg" alt="ALT" />
    </a>
</div>

Answer 1

CSS3 中的一些不错的属性可以帮助解决这个问题。我以结构良好的形式编写了代码，以便您可以轻松阅读。使用内联样式不会真正提高可读性，我强烈建议您将您的样式放在一个单独的类中。

HTML

<div class="box">
    <img src="linktoyourimage.jpg" alt="" title="" />
<div>

CSS

.box{
    width: 100%;
    height: 100vh;
}

img{
    width: 100%;
    height: 100%;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    object-fit: cover; /* Not supported in IE */
}

重要的是您需要为您的 div 定义宽度和高度，它是您的图像容器。应将其设置为 100% 以具有适合您的屏幕的宽度。您会注意到我使用了 height:100vh。这使 div 占据浏览器的整个高度。您可以阅读有关视口(viewport)单位的更多信息 here .

接下来您希望图像填充该框，因此它的宽度和高度为 100%。然而，我们利用左平移使图像居中，最后使用 object-fit 使图像适合盒子。基本上 object-fit 所做的是裁剪图像以适合盒子而不拉伸(stretch)或调整它的大小。

如果你愿意，我会把它留给你让它内联。如果你想看看代码是如何工作的，下面是一个 JSFiddle。

JS fiddle

http://jsfiddle.net/whw8n56d/3/