在 CSS 中居中可调整大小的图像答案

【问题标题】：Centering a resizable image in CSS在 CSS 中居中可调整大小的图像
【发布时间】：2016-07-10 20:31:03
【问题描述】：

我正在尝试将图像居中到某个 div 的确切中心。图片必须保持其原始纵横比，但还必须能够根据浏览器的宽度和高度进行放大和缩小。

更准确地说：容器填满了整个窗口，每边都有 100 像素的内边距。容器内部是一个图像，它水平或垂直填充填充的 div，具体取决于其纵横比。最后，该图像必须位于所有图像的中心。

这是我的代码：

main {

}

main figure {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 100px;
    height: calc( 100vh - 200px );
}

main figure img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

<main>
    <figure>
        <img src="https://msdnshared.blob.core.windows.net/media/TNBlogsFS/prod.evol.blogs.technet.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/03/07/uno.jpg" />
    </figure>
</main>

我希望它足够清楚。感谢您的帮助！

【问题讨论】：

您的图像似乎已经以我为中心。您当前的代码有什么问题？

标签： html image css flexbox

【解决方案1】：

将包装元素设置为position:relative

将您的 img 元素设置为具有以下 CSS：

img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

这应该使图像直接位于包装器的中心。

【讨论】：

完美而简单。谢谢！

【解决方案2】：

考虑使用支持响应式网页设计的引导框架。通过使用名为 img-responsive 的类，您将能够使图像响应浏览器的宽度和高度。

在 HTML 中包含引导 JavaScript
在 HTML 中包含引导 CSS
编写 CSS 以使图像居中和填充
为图片添加 img-responsive 类

这是引导响应图像的示例 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_img-responsive&stacked=h

【讨论】：